From b8192bd06dcc48e4459ce8ba8f0cb8e7bfac2b70 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 3 Jan 2025 17:26:58 -0500 Subject: [PATCH 1/3] build: optimize and harden css token imports --- package.json | 2 +- packages/accordion/package.json | 2 +- .../src/accordion-item-overrides.css | 2 +- .../accordion/src/accordion-overrides.css | 2 +- packages/action-bar/package.json | 2 +- .../action-bar/src/action-bar-overrides.css | 2 +- packages/action-button/package.json | 2 +- .../src/action-button-overrides.css | 2 +- packages/action-group/package.json | 2 +- .../src/action-group-overrides.css | 2 +- packages/action-menu/package.json | 2 +- packages/alert-banner/package.json | 2 +- .../src/alert-banner-overrides.css | 2 +- packages/alert-dialog/package.json | 2 +- .../src/alert-dialog-overrides.css | 2 +- packages/asset/package.json | 2 +- packages/asset/src/asset-overrides.css | 2 +- packages/avatar/package.json | 2 +- packages/avatar/src/avatar-overrides.css | 2 +- packages/badge/package.json | 2 +- packages/badge/src/badge-overrides.css | 2 +- packages/breadcrumbs/package.json | 2 +- .../breadcrumbs/src/breadcrumbs-overrides.css | 2 +- packages/button-group/package.json | 2 +- .../src/button-group-overrides.css | 2 +- packages/button/package.json | 2 +- packages/button/src/button-overrides.css | 2 +- packages/card/package.json | 2 +- packages/card/src/card-overrides.css | 2 +- packages/checkbox/package.json | 2 +- packages/checkbox/src/checkbox-overrides.css | 2 +- packages/clear-button/package.json | 2 +- .../src/clear-button-overrides.css | 2 +- packages/close-button/package.json | 2 +- .../src/close-button-overrides.css | 2 +- packages/coachmark/package.json | 4 +- .../src/coach-indicator-overrides.css | 2 +- .../coachmark/src/coachmark-overrides.css | 2 +- packages/color-area/package.json | 2 +- .../color-area/src/color-area-overrides.css | 2 +- packages/color-handle/package.json | 2 +- .../src/color-handle-overrides.css | 2 +- packages/color-loupe/package.json | 2 +- .../color-loupe/src/color-loupe-overrides.css | 2 +- packages/color-slider/package.json | 2 +- .../src/color-slider-overrides.css | 2 +- packages/color-wheel/package.json | 2 +- .../color-wheel/src/color-wheel-overrides.css | 2 +- packages/combobox/package.json | 2 +- packages/combobox/src/combobox-overrides.css | 2 +- packages/contextual-help/package.json | 2 +- .../src/contextual-help-overrides.css | 2 +- packages/dialog/package.json | 2 +- packages/dialog/src/dialog-overrides.css | 2 +- packages/divider/package.json | 2 +- packages/divider/src/divider-overrides.css | 2 +- packages/dropzone/package.json | 2 +- packages/dropzone/src/dropzone-overrides.css | 2 +- packages/field-group/package.json | 2 +- .../field-group/src/field-group-overrides.css | 2 +- packages/field-label/package.json | 2 +- .../field-label/src/field-label-overrides.css | 2 +- packages/help-text/package.json | 2 +- .../help-text/src/help-text-overrides.css | 2 +- packages/icon/package.json | 2 +- packages/icon/src/icon-arrow-overrides.css | 2 +- packages/icon/src/icon-asterisk-overrides.css | 2 +- .../icon/src/icon-checkmark-overrides.css | 2 +- packages/icon/src/icon-chevron-overrides.css | 2 +- .../src/icon-corner-triangle-overrides.css | 2 +- packages/icon/src/icon-cross-overrides.css | 2 +- packages/icon/src/icon-dash-overrides.css | 2 +- packages/icon/src/icon-overrides.css | 2 +- packages/icons-ui/package.json | 2 +- packages/icons-workflow/package.json | 2 +- packages/icons/src/icons-large.svg.ts | 2 +- packages/icons/src/icons-medium.svg.ts | 2 +- packages/illustrated-message/package.json | 2 +- .../src/illustratedmessage-overrides.css | 2 +- packages/infield-button/package.json | 2 +- .../src/infield-button-overrides.css | 2 +- packages/link/package.json | 2 +- packages/link/src/link-overrides.css | 2 +- packages/menu/package.json | 2 +- packages/menu/src/menu-overrides.css | 2 +- packages/meter/package.json | 4 +- packages/meter/src/meter-overrides.css | 2 +- packages/meter/src/progress-bar-overrides.css | 2 +- packages/modal/package.json | 2 +- packages/modal/src/modal-overrides.css | 2 +- packages/number-field/package.json | 2 +- .../src/number-field-overrides.css | 2 +- packages/picker-button/package.json | 2 +- .../src/picker-button-overrides.css | 2 +- packages/picker/package.json | 2 +- packages/picker/src/picker-overrides.css | 2 +- packages/popover/package.json | 2 +- packages/popover/src/popover-overrides.css | 2 +- packages/progress-bar/package.json | 2 +- .../src/progress-bar-overrides.css | 2 +- packages/progress-circle/package.json | 2 +- .../src/progress-circle-overrides.css | 2 +- packages/radio/package.json | 2 +- packages/radio/src/radio-overrides.css | 46 +- packages/radio/src/spectrum-radio.css | 2 +- packages/search/package.json | 2 +- packages/search/src/search-overrides.css | 22 +- packages/search/src/spectrum-search.css | 25 +- packages/sidenav/package.json | 2 +- .../sidenav/src/sidenav-heading-overrides.css | 2 +- .../sidenav/src/sidenav-item-overrides.css | 2 +- packages/sidenav/src/sidenav-overrides.css | 2 +- packages/slider/package.json | 2 +- packages/slider/src/slider-overrides.css | 2 +- packages/split-view/package.json | 2 +- .../split-view/src/split-view-overrides.css | 2 +- packages/status-light/package.json | 2 +- .../src/status-light-overrides.css | 2 +- packages/swatch/package.json | 4 +- .../swatch/src/swatch-group-overrides.css | 2 +- packages/swatch/src/swatch-overrides.css | 2 +- packages/switch/package.json | 2 +- packages/switch/src/switch-overrides.css | 2 +- packages/table/package.json | 2 +- packages/table/src/table-overrides.css | 2 +- packages/tabs/package.json | 2 +- packages/tabs/src/tabs-overrides.css | 2 +- packages/tabs/src/tabs-sizes-overrides.css | 2 +- packages/tags/package.json | 4 +- packages/tags/src/tag-overrides.css | 2 +- packages/tags/src/tags-overrides.css | 2 +- packages/textfield/package.json | 2 +- .../textfield/src/textfield-overrides.css | 2 +- packages/toast/package.json | 2 +- packages/toast/src/toast-overrides.css | 2 +- packages/tooltip/package.json | 2 +- packages/tooltip/src/tooltip-overrides.css | 2 +- packages/tray/package.json | 2 +- packages/tray/src/tray-overrides.css | 2 +- packages/underlay/package.json | 2 +- packages/underlay/src/underlay-overrides.css | 2 +- projects/documentation/scripts/build-css.js | 5 +- .../documentation/src/components/styles.css | 1 + scripts/generate-tokens-wrapper.js | 358 +- tasks/css-tools.js | 73 +- tasks/process-spectrum.js | 35 +- tools/opacity-checkerboard/package.json | 2 +- .../src/is-opacity-checkerboard-overrides.css | 2 +- .../src/opacity-checkerboard-overrides.css | 2 +- tools/styles/package.json | 4 +- tools/styles/src/body-overrides.css | 2 +- tools/styles/src/code-overrides.css | 2 +- tools/styles/src/detail-overrides.css | 2 +- tools/styles/src/heading-overrides.css | 2 +- .../global-vars.css => component-bridge.css} | 1079 +-- tools/styles/tokens-v2/dark-vars.css | 10 - tools/styles/tokens-v2/global-vars.css | 40 +- tools/styles/tokens-v2/index.css | 4440 ---------- tools/styles/tokens-v2/large-vars.css | 20 - tools/styles/tokens-v2/light-vars.css | 10 - tools/styles/tokens-v2/medium-vars.css | 20 - .../tokens-v2/spectrum/custom-dark-vars.css | 108 - .../spectrum/custom-darkest-vars.css | 109 - .../tokens-v2/spectrum/custom-large-vars.css | 120 - .../tokens-v2/spectrum/custom-light-vars.css | 108 - .../tokens-v2/spectrum/custom-medium-vars.css | 121 - .../styles/tokens-v2/spectrum/custom-vars.css | 52 - .../tokens/express/component-bridge.css | 6913 ++++++++++++++++ .../tokens/express/custom-dark-vars.css | 13 - .../tokens/express/custom-darkest-vars.css | 13 - .../tokens/express/custom-large-vars.css | 3 - .../tokens/express/custom-light-vars.css | 15 - .../tokens/express/custom-medium-vars.css | 3 - tools/styles/tokens/express/dark-vars.css | 1 - tools/styles/tokens/express/darkest-vars.css | 1 - tools/styles/tokens/express/global-vars.css | 7235 ---------------- tools/styles/tokens/express/index.css | 225 - tools/styles/tokens/express/large-vars.css | 3 - tools/styles/tokens/express/light-vars.css | 1 - tools/styles/tokens/express/medium-vars.css | 3 - tools/styles/tokens/global-vars.css | 4 +- tools/styles/tokens/index.css | 3360 -------- .../tokens/spectrum/component-bridge.css | 6919 ++++++++++++++++ .../tokens/spectrum/custom-dark-vars.css | 92 - .../tokens/spectrum/custom-darkest-vars.css | 93 - .../tokens/spectrum/custom-large-vars.css | 20 - .../tokens/spectrum/custom-light-vars.css | 92 - .../tokens/spectrum/custom-medium-vars.css | 19 - tools/styles/tokens/spectrum/custom-vars.css | 32 +- tools/styles/tokens/spectrum/dark-vars.css | 10 - tools/styles/tokens/spectrum/darkest-vars.css | 10 - tools/styles/tokens/spectrum/global-vars.css | 7272 +---------------- tools/styles/tokens/spectrum/index.css | 803 -- tools/styles/tokens/spectrum/large-vars.css | 20 - tools/styles/tokens/spectrum/light-vars.css | 10 - tools/styles/tokens/spectrum/medium-vars.css | 19 - tools/theme/src/express/theme-core-tokens.css | 1 + .../src/express/theme-dark-core-tokens.css | 4 +- tools/theme/src/express/theme-dark.css | 4 +- .../src/express/theme-light-core-tokens.css | 4 +- tools/theme/src/express/theme-light.css | 4 +- tools/theme/src/express/theme.css | 1 + .../spectrum-two/scale-large-core-tokens.css | 1 - tools/theme/src/spectrum-two/scale-large.css | 1 - .../spectrum-two/scale-medium-core-tokens.css | 1 - tools/theme/src/spectrum-two/scale-medium.css | 1 - .../src/spectrum-two/theme-core-tokens.css | 3 +- .../spectrum-two/theme-dark-core-tokens.css | 1 - tools/theme/src/spectrum-two/theme-dark.css | 1 - .../spectrum-two/theme-light-core-tokens.css | 1 - tools/theme/src/spectrum-two/theme-light.css | 1 - tools/theme/src/spectrum-two/theme.css | 3 +- tools/theme/src/theme-core-tokens.css | 1 + tools/theme/src/theme-dark-core-tokens.css | 2 +- tools/theme/src/theme-dark.css | 2 +- tools/theme/src/theme-darkest-core-tokens.css | 2 +- tools/theme/src/theme-darkest.css | 2 +- tools/theme/src/theme-light-core-tokens.css | 2 +- tools/theme/src/theme-light.css | 2 +- .../theme/src/theme-lightest-core-tokens.css | 2 +- tools/theme/src/theme-lightest.css | 2 +- tools/theme/src/theme.css | 1 + yarn.lock | 434 +- 223 files changed, 15042 insertions(+), 25750 deletions(-) rename tools/styles/tokens-v2/{spectrum/global-vars.css => component-bridge.css} (97%) delete mode 100644 tools/styles/tokens-v2/index.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-dark-vars.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-darkest-vars.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-large-vars.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-light-vars.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-medium-vars.css delete mode 100644 tools/styles/tokens-v2/spectrum/custom-vars.css create mode 100644 tools/styles/tokens/express/component-bridge.css delete mode 100644 tools/styles/tokens/express/custom-dark-vars.css delete mode 100644 tools/styles/tokens/express/custom-darkest-vars.css delete mode 100644 tools/styles/tokens/express/custom-light-vars.css delete mode 100644 tools/styles/tokens/express/index.css delete mode 100644 tools/styles/tokens/index.css create mode 100644 tools/styles/tokens/spectrum/component-bridge.css delete mode 100644 tools/styles/tokens/spectrum/custom-dark-vars.css delete mode 100644 tools/styles/tokens/spectrum/custom-darkest-vars.css delete mode 100644 tools/styles/tokens/spectrum/custom-light-vars.css delete mode 100644 tools/styles/tokens/spectrum/index.css diff --git a/package.json b/package.json index 67aa790871..8ef49c1017 100755 --- a/package.json +++ b/package.json @@ -143,7 +143,7 @@ "@webcomponents/webcomponentsjs": "^2.8.0", "alex": "^11.0.1", "cem-plugin-module-file-extensions": "^0.0.5", - "chalk": "^5.0.1", + "colors": "^1.4.0", "chromatic": "^11.20.0", "chromedriver": "^130.0.1", "common-tags": "^1.8.2", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index c0cd99fe2c..137ee9abd4 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -75,7 +75,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/accordion": "^6.0.0-s2-foundations.16" + "@spectrum-css/accordion": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/accordion/src/accordion-item-overrides.css b/packages/accordion/src/accordion-item-overrides.css index b24c42a121..278b1f0dea 100644 --- a/packages/accordion/src/accordion-item-overrides.css +++ b/packages/accordion/src/accordion-item-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css index bd9e613923..89b5f63fb9 100644 --- a/packages/accordion/src/accordion-overrides.css +++ b/packages/accordion/src/accordion-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index 2fb5d90754..8ce8116fd2 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/popover": "^1.0.3" }, "devDependencies": { - "@spectrum-css/actionbar": "^9.0.0-s2-foundations.16" + "@spectrum-css/actionbar": "9.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css index c6227c741f..704eb774f8 100644 --- a/packages/action-bar/src/action-bar-overrides.css +++ b/packages/action-bar/src/action-bar-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/action-button/package.json b/packages/action-button/package.json index 8354deb0a5..339aaa6060 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/actionbutton": "^7.0.0-s2-foundations.22" + "@spectrum-css/actionbutton": "7.0.0-s2-foundations.22" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css index c34e4f0976..18725b2d1a 100644 --- a/packages/action-button/src/action-button-overrides.css +++ b/packages/action-button/src/action-button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/action-group/package.json b/packages/action-group/package.json index 64d558151f..e796c08207 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/reactive-controllers": "^1.0.3" }, "devDependencies": { - "@spectrum-css/actiongroup": "^6.0.0-s2-foundations.15" + "@spectrum-css/actiongroup": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css index 10f612dac3..35cd126ebc 100644 --- a/packages/action-group/src/action-group-overrides.css +++ b/packages/action-group/src/action-group-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index 27339f47fd..5f2ed1c36c 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/actionmenu": "^7.0.0-s2-foundations.15" + "@spectrum-css/actionmenu": "7.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index 567499e4d7..bb7423ac14 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/icons-workflow": "^1.0.3" }, "devDependencies": { - "@spectrum-css/alertbanner": "^3.0.0-s2-foundations.16" + "@spectrum-css/alertbanner": "3.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css index 733e387e43..9277a33b05 100644 --- a/packages/alert-banner/src/alert-banner-overrides.css +++ b/packages/alert-banner/src/alert-banner-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index a222629753..4e230e1757 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -67,7 +67,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/alertdialog": "^3.0.0-s2-foundations.15" + "@spectrum-css/alertdialog": "3.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-dialog/src/alert-dialog-overrides.css b/packages/alert-dialog/src/alert-dialog-overrides.css index de7d0f1833..4e2a4ac214 100644 --- a/packages/alert-dialog/src/alert-dialog-overrides.css +++ b/packages/alert-dialog/src/alert-dialog-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/asset/package.json b/packages/asset/package.json index 58ba033f94..10e4f4eb24 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/asset": "^6.0.0-s2-foundations.15" + "@spectrum-css/asset": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css index 88e6974a2b..41267b0876 100644 --- a/packages/asset/src/asset-overrides.css +++ b/packages/asset/src/asset-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 5589e92a0c..eac9a7f065 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/avatar": "^8.0.0-s2-foundations.15" + "@spectrum-css/avatar": "8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/src/avatar-overrides.css b/packages/avatar/src/avatar-overrides.css index b7329c6bf7..fca1f4c577 100644 --- a/packages/avatar/src/avatar-overrides.css +++ b/packages/avatar/src/avatar-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/badge/package.json b/packages/badge/package.json index 0bb4635ee0..bea94e188c 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/badge": "^5.0.0-s2-foundations.15" + "@spectrum-css/badge": "5.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/badge/src/badge-overrides.css b/packages/badge/src/badge-overrides.css index f02f512bfe..1877a797ff 100644 --- a/packages/badge/src/badge-overrides.css +++ b/packages/badge/src/badge-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index 02864a7b74..ff65bb7a8b 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -74,7 +74,7 @@ "@spectrum-web-components/menu": "^1.0.3" }, "devDependencies": { - "@spectrum-css/breadcrumb": "^10.0.0-s2-foundations.15" + "@spectrum-css/breadcrumb": "10.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/packages/breadcrumbs/src/breadcrumbs-overrides.css index f395509fe0..c84e3dca39 100644 --- a/packages/breadcrumbs/src/breadcrumbs-overrides.css +++ b/packages/breadcrumbs/src/breadcrumbs-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/button-group/package.json b/packages/button-group/package.json index a1f9d5c3b9..9c3c95e29c 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/button": "^1.0.3" }, "devDependencies": { - "@spectrum-css/buttongroup": "^8.0.0-s2-foundations.15" + "@spectrum-css/buttongroup": "8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button-group/src/button-group-overrides.css b/packages/button-group/src/button-group-overrides.css index 2ad1ce7f91..91a028431c 100644 --- a/packages/button-group/src/button-group-overrides.css +++ b/packages/button-group/src/button-group-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/button/package.json b/packages/button/package.json index f27d27fd33..a40db71f51 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -93,7 +93,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/button": "^14.0.0-s2-foundations.18" + "@spectrum-css/button": "14.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css index d6ae5b239f..f5827dcfef 100644 --- a/packages/button/src/button-overrides.css +++ b/packages/button/src/button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/card/package.json b/packages/card/package.json index 86e4256d53..49bcc9d18f 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -67,7 +67,7 @@ "@spectrum-web-components/styles": "^1.0.3" }, "devDependencies": { - "@spectrum-css/card": "^10.0.0-s2-foundations.20" + "@spectrum-css/card": "10.0.0-s2-foundations.20" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css index 0517067fea..e08c07aff1 100644 --- a/packages/card/src/card-overrides.css +++ b/packages/card/src/card-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 35d95537c0..88f9e16bc8 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -72,7 +72,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/checkbox": "^10.0.0-s2-foundations.18" + "@spectrum-css/checkbox": "10.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css index c41cf125f9..5bc06fba2e 100644 --- a/packages/checkbox/src/checkbox-overrides.css +++ b/packages/checkbox/src/checkbox-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index 482844854a..d344ff325f 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -46,7 +46,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/clearbutton": "^7.0.0-s2-foundations.16" + "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index 1b58871627..d2a1252c7b 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 272e9ad8c0..23dd46bde0 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -46,7 +46,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/closebutton": "^6.0.0-s2-foundations.16" + "@spectrum-css/closebutton": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css index c8de127d67..005a7a6d0d 100644 --- a/packages/close-button/src/close-button-overrides.css +++ b/packages/close-button/src/close-button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index 1fa20eba9e..a828c6342c 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -82,8 +82,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/coachindicator": "^3.0.0-s2-foundations.16", - "@spectrum-css/coachmark": "^8.0.0-s2-foundations.17" + "@spectrum-css/coachindicator": "3.0.0-s2-foundations.16", + "@spectrum-css/coachmark": "8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css index 983a99f05c..8f1727e716 100644 --- a/packages/coachmark/src/coach-indicator-overrides.css +++ b/packages/coachmark/src/coach-indicator-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css index e79be039b7..092944c6d8 100644 --- a/packages/coachmark/src/coachmark-overrides.css +++ b/packages/coachmark/src/coachmark-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/color-area/package.json b/packages/color-area/package.json index 479df2d424..41e5e98c14 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorarea": "^6.0.0-s2-foundations.15" + "@spectrum-css/colorarea": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-area/src/color-area-overrides.css b/packages/color-area/src/color-area-overrides.css index 72129ea35e..2c294b19ff 100644 --- a/packages/color-area/src/color-area-overrides.css +++ b/packages/color-area/src/color-area-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index e6af1e1a02..2e50db474f 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/opacity-checkerboard": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorhandle": "^9.0.0-s2-foundations.16" + "@spectrum-css/colorhandle": "9.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/color-handle-overrides.css b/packages/color-handle/src/color-handle-overrides.css index 21f8e9ba06..de3013d195 100644 --- a/packages/color-handle/src/color-handle-overrides.css +++ b/packages/color-handle/src/color-handle-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index e0be298f64..dcb1303da7 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorloupe": "^6.0.0-s2-foundations.15" + "@spectrum-css/colorloupe": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/packages/color-loupe/src/color-loupe-overrides.css index 824f355e97..34d44a5a02 100644 --- a/packages/color-loupe/src/color-loupe-overrides.css +++ b/packages/color-loupe/src/color-loupe-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index eecfb4ede3..c9e2bb1d00 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorslider": "^7.0.0-s2-foundations.16" + "@spectrum-css/colorslider": "7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-slider/src/color-slider-overrides.css b/packages/color-slider/src/color-slider-overrides.css index 57a61af7b2..69c1c5f4b7 100644 --- a/packages/color-slider/src/color-slider-overrides.css +++ b/packages/color-slider/src/color-slider-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index 82bc903c32..4ce911c1b6 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorwheel": "^5.0.0-s2-foundations.15" + "@spectrum-css/colorwheel": "5.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css index c438c4fb56..cf779adff3 100644 --- a/packages/color-wheel/src/color-wheel-overrides.css +++ b/packages/color-wheel/src/color-wheel-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 0f4cf23355..1c96fda623 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/textfield": "^1.0.3" }, "devDependencies": { - "@spectrum-css/combobox": "^4.0.0-s2-foundations.18" + "@spectrum-css/combobox": "4.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css index 4d6df44f51..d89e93ae3d 100644 --- a/packages/combobox/src/combobox-overrides.css +++ b/packages/combobox/src/combobox-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index c2b2f94b22..829e603b84 100644 --- a/packages/contextual-help/package.json +++ b/packages/contextual-help/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/popover": "^1.0.3" }, "devDependencies": { - "@spectrum-css/contextualhelp": "^4.0.0-s2-foundations.16" + "@spectrum-css/contextualhelp": "4.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/contextual-help/src/contextual-help-overrides.css b/packages/contextual-help/src/contextual-help-overrides.css index e57911a638..e5643f439c 100644 --- a/packages/contextual-help/src/contextual-help-overrides.css +++ b/packages/contextual-help/src/contextual-help-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/dialog/package.json b/packages/dialog/package.json index f75c1d245f..ea21b208b7 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -85,7 +85,7 @@ "@spectrum-web-components/underlay": "^1.0.1" }, "devDependencies": { - "@spectrum-css/dialog": "^11.0.0-s2-foundations.15" + "@spectrum-css/dialog": "11.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css index 23ba2c79b7..b0f7137637 100644 --- a/packages/dialog/src/dialog-overrides.css +++ b/packages/dialog/src/dialog-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/divider/package.json b/packages/divider/package.json index 3b67d5d53b..007db5bea9 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/divider": "^4.0.0-s2-foundations.15" + "@spectrum-css/divider": "4.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/divider/src/divider-overrides.css b/packages/divider/src/divider-overrides.css index 9a7d1fd3c4..c92639893c 100644 --- a/packages/divider/src/divider-overrides.css +++ b/packages/divider/src/divider-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 678a94c3df..cc01e61443 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/dropzone": "^7.0.0-s2-foundations.16" + "@spectrum-css/dropzone": "7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css index b7bc5036ef..dcbb63ec23 100644 --- a/packages/dropzone/src/dropzone-overrides.css +++ b/packages/dropzone/src/dropzone-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/field-group/package.json b/packages/field-group/package.json index 0101eb608c..a930f772a0 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/help-text": "^1.0.3" }, "devDependencies": { - "@spectrum-css/fieldgroup": "^6.0.0-s2-foundations.16" + "@spectrum-css/fieldgroup": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css index 757af674dc..1a9d3ee2f8 100644 --- a/packages/field-group/src/field-group-overrides.css +++ b/packages/field-group/src/field-group-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/field-label/package.json b/packages/field-label/package.json index 72e40d949d..3496bf3bbc 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/fieldlabel": "^9.0.0-s2-foundations.16" + "@spectrum-css/fieldlabel": "9.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css index 086168cd48..9ecf9e545a 100644 --- a/packages/field-label/src/field-label-overrides.css +++ b/packages/field-label/src/field-label-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/help-text/package.json b/packages/help-text/package.json index 4ee311142a..d502520451 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/helptext": "^6.0.0-s2-foundations.15" + "@spectrum-css/helptext": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css index 5beea7bdca..bfbc227fca 100644 --- a/packages/help-text/src/help-text-overrides.css +++ b/packages/help-text/src/help-text-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/package.json b/packages/icon/package.json index 4bd18c5b6b..df11b57c88 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -85,7 +85,7 @@ "@spectrum-web-components/iconset": "^1.0.1" }, "devDependencies": { - "@spectrum-css/icon": "^8.0.0-s2-foundations.17" + "@spectrum-css/icon": "8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/icon/src/icon-arrow-overrides.css b/packages/icon/src/icon-arrow-overrides.css index 3720577ce1..b1d2cc010a 100644 --- a/packages/icon/src/icon-arrow-overrides.css +++ b/packages/icon/src/icon-arrow-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-asterisk-overrides.css b/packages/icon/src/icon-asterisk-overrides.css index 6cc48423c4..42f2598a55 100644 --- a/packages/icon/src/icon-asterisk-overrides.css +++ b/packages/icon/src/icon-asterisk-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-checkmark-overrides.css b/packages/icon/src/icon-checkmark-overrides.css index 2eb94d9059..4699741aa1 100644 --- a/packages/icon/src/icon-checkmark-overrides.css +++ b/packages/icon/src/icon-checkmark-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-chevron-overrides.css b/packages/icon/src/icon-chevron-overrides.css index d4ea6b15b6..d76e556c3c 100644 --- a/packages/icon/src/icon-chevron-overrides.css +++ b/packages/icon/src/icon-chevron-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-corner-triangle-overrides.css b/packages/icon/src/icon-corner-triangle-overrides.css index c3cca3d2c4..7e47ee9842 100644 --- a/packages/icon/src/icon-corner-triangle-overrides.css +++ b/packages/icon/src/icon-corner-triangle-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-cross-overrides.css b/packages/icon/src/icon-cross-overrides.css index e725660f02..06559077a7 100644 --- a/packages/icon/src/icon-cross-overrides.css +++ b/packages/icon/src/icon-cross-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-dash-overrides.css b/packages/icon/src/icon-dash-overrides.css index dd0c1c2a95..12639daa00 100644 --- a/packages/icon/src/icon-dash-overrides.css +++ b/packages/icon/src/icon-dash-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icon/src/icon-overrides.css b/packages/icon/src/icon-overrides.css index 5892b75257..c32a701611 100644 --- a/packages/icon/src/icon-overrides.css +++ b/packages/icon/src/icon-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index 7002c88bc6..c397682fa8 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/ui-icons": "^1.1.2", - "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@^2.0.0-s2-foundations.10", + "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index cc3986e1b7..8e8572604a 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -51,7 +51,7 @@ "devDependencies": { "@adobe/spectrum-css-workflow-icons": "1.5.4", "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@^4.0.0", - "@spectrum-css/icon": "^8.0.0-s2-foundations.16", + "@spectrum-css/icon": "8.0.0-s2-foundations.16", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index 3dfc03dd06..13e31597c6 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -1,5 +1,5 @@ /* -Copyright 2024 Adobe. All rights reserved. +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 diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index f9fc0116df..3a33433d1e 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -1,5 +1,5 @@ /* -Copyright 2024 Adobe. All rights reserved. +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 diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index e677c08253..eb4d2f708b 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/styles": "^1.0.3" }, "devDependencies": { - "@spectrum-css/illustratedmessage": "^8.0.0-s2-foundations.15" + "@spectrum-css/illustratedmessage": "8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/illustrated-message/src/illustratedmessage-overrides.css b/packages/illustrated-message/src/illustratedmessage-overrides.css index fc8930c47b..84d0ba1548 100644 --- a/packages/illustrated-message/src/illustratedmessage-overrides.css +++ b/packages/illustrated-message/src/illustratedmessage-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index a92cf64973..f14c2383cd 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/button": "^1.0.3" }, "devDependencies": { - "@spectrum-css/infieldbutton": "^6.0.0-s2-foundations.16" + "@spectrum-css/infieldbutton": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css index 8c05c2e2b2..dedc98e33f 100644 --- a/packages/infield-button/src/infield-button-overrides.css +++ b/packages/infield-button/src/infield-button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/link/package.json b/packages/link/package.json index fd0b2cee7f..cdaf8ae1b6 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/link": "^6.0.0-s2-foundations.15" + "@spectrum-css/link": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/link/src/link-overrides.css b/packages/link/src/link-overrides.css index ea14dbd0a0..e93605aa35 100644 --- a/packages/link/src/link-overrides.css +++ b/packages/link/src/link-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/menu/package.json b/packages/menu/package.json index 6dc632395f..c4bb9f43e2 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -101,7 +101,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/menu": "^8.0.0-s2-foundations.16" + "@spectrum-css/menu": "8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css index 652c22dd08..cdac1480d6 100644 --- a/packages/menu/src/menu-overrides.css +++ b/packages/menu/src/menu-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/meter/package.json b/packages/meter/package.json index c0a23b883a..7431fffa4d 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -65,8 +65,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/meter": "^0.0.0-s2-foundations.2", - "@spectrum-css/progressbar": "^5.0.0-s2-foundations.19" + "@spectrum-css/meter": "0.0.0-s2-foundations.2", + "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css index e872c53860..08a6354cb2 100644 --- a/packages/meter/src/meter-overrides.css +++ b/packages/meter/src/meter-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css index e32f60e60f..60a1a39eac 100644 --- a/packages/meter/src/progress-bar-overrides.css +++ b/packages/meter/src/progress-bar-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/modal/package.json b/packages/modal/package.json index d0fff49f8c..4d0ffa1cf9 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -47,7 +47,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/modal": "^6.0.0-s2-foundations.16" + "@spectrum-css/modal": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css index da4e74817b..f05f590dbb 100644 --- a/packages/modal/src/modal-overrides.css +++ b/packages/modal/src/modal-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/number-field/package.json b/packages/number-field/package.json index fa66120068..7f14bc770d 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -69,7 +69,7 @@ }, "devDependencies": { "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "^7.0.0-s2-foundations.18" + "@spectrum-css/stepper": "7.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css index 64a2b4e35c..822d373bc9 100644 --- a/packages/number-field/src/number-field-overrides.css +++ b/packages/number-field/src/number-field-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index b9bc325298..89e7b87274 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/pickerbutton": "^6.0.0-s2-foundations.16" + "@spectrum-css/pickerbutton": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css index 5ef0a6e107..b3b2a5d330 100644 --- a/packages/picker-button/src/picker-button-overrides.css +++ b/packages/picker-button/src/picker-button-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/picker/package.json b/packages/picker/package.json index 9feedf8030..910a7972cb 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -98,7 +98,7 @@ "@spectrum-web-components/tray": "^1.0.3" }, "devDependencies": { - "@spectrum-css/picker": "^9.0.0-s2-foundations.15" + "@spectrum-css/picker": "9.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css index 670397798a..3da034b6e1 100644 --- a/packages/picker/src/picker-overrides.css +++ b/packages/picker/src/picker-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/popover/package.json b/packages/popover/package.json index b3e56a9f19..881fc0f6c2 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/overlay": "^1.0.3" }, "devDependencies": { - "@spectrum-css/popover": "^8.0.0-s2-foundations.16" + "@spectrum-css/popover": "8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css index f6f23988a8..1790ee3b82 100644 --- a/packages/popover/src/popover-overrides.css +++ b/packages/popover/src/popover-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index ebfe7005cd..e8b120dfbd 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/progressbar": "^5.0.0-s2-foundations.19" + "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css index 55c099e7ca..c9c2a7c5f5 100644 --- a/packages/progress-bar/src/progress-bar-overrides.css +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json index b066691f3d..a410d4f282 100644 --- a/packages/progress-circle/package.json +++ b/packages/progress-circle/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/progresscircle": "^4.0.0-s2-foundations.15" + "@spectrum-css/progresscircle": "4.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css index 3bc4f00712..04b68cee39 100644 --- a/packages/progress-circle/src/progress-circle-overrides.css +++ b/packages/progress-circle/src/progress-circle-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/radio/package.json b/packages/radio/package.json index 2b8447f4d0..f3edf1979d 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -73,7 +73,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/radio": "^10.0.0-s2-foundations.15" + "@spectrum-css/radio": "10.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index ed45be6af0..b154c61b2d 100644 --- a/packages/radio/src/radio-overrides.css +++ b/packages/radio/src/radio-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language @@ -79,21 +79,21 @@ --spectrum-radio-button-checked-border-color-focus: var( --system-radio-button-checked-border-color-focus ); + --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-font-size: var(--system-radio-font-size); --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)) { @@ -114,44 +114,44 @@ ); } -:host { - --spectrum-radio-height: var(--system-radio-size-m-height); +:host([size='s']) { + --spectrum-radio-height: var(--system-radio-size-s-height); --spectrum-radio-button-control-size: var( - --system-radio-size-m-button-control-size + --system-radio-size-s-button-control-size ); --spectrum-radio-text-to-control: var( - --system-radio-size-m-text-to-control + --system-radio-size-s-text-to-control ); --spectrum-radio-label-top-to-text: var( - --system-radio-size-m-label-top-to-text + --system-radio-size-s-label-top-to-text ); --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-m-label-bottom-to-text + --system-radio-size-s-label-bottom-to-text ); --spectrum-radio-button-top-to-control: var( - --system-radio-size-m-button-top-to-control + --system-radio-size-s-button-top-to-control ); - --spectrum-radio-font-size: var(--system-radio-size-m-font-size); + --spectrum-radio-font-size: var(--system-radio-size-s-font-size); } -:host([size='s']) { - --spectrum-radio-height: var(--system-radio-size-s-height); +:host { + --spectrum-radio-height: var(--system-radio-size-m-height); --spectrum-radio-button-control-size: var( - --system-radio-size-s-button-control-size + --system-radio-size-m-button-control-size ); --spectrum-radio-text-to-control: var( - --system-radio-size-s-text-to-control + --system-radio-size-m-text-to-control ); --spectrum-radio-label-top-to-text: var( - --system-radio-size-s-label-top-to-text + --system-radio-size-m-label-top-to-text ); --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-s-label-bottom-to-text + --system-radio-size-m-label-bottom-to-text ); --spectrum-radio-button-top-to-control: var( - --system-radio-size-s-button-top-to-control + --system-radio-size-m-button-top-to-control ); - --spectrum-radio-font-size: var(--system-radio-size-s-font-size); + --spectrum-radio-font-size: var(--system-radio-size-m-font-size); } :host([size='l']) { diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 00c7ce3b70..455d90ccda 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -153,7 +153,7 @@ governing permissions and limitations under the License. var(--spectrum-radio-neutral-content-color) ) ); - margin-inline-start: 0; + margin-inline-start: auto; } :host([emphasized][checked]) #input + #button:before { diff --git a/packages/search/package.json b/packages/search/package.json index 82d4da8452..353f6fbc77 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/textfield": "^1.0.3" }, "devDependencies": { - "@spectrum-css/search": "^8.0.0-s2-foundations.17" + "@spectrum-css/search": "8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index d5d425a56d..26d7b4c95f 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language @@ -68,16 +68,6 @@ --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='s']) #textfield { --spectrum-search-border-radius: var(--system-search-size-s-border-radius); --spectrum-search-edge-to-visual: var( @@ -88,6 +78,16 @@ --spectrum-search-text-to-icon: var(--system-search-size-s-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='l']) #textfield { --spectrum-search-border-radius: var(--system-search-size-l-border-radius); --spectrum-search-edge-to-visual: var( diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 964aed202b..1f4b8fb36b 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -269,18 +269,19 @@ governing permissions and limitations under the License. } :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: 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)); +:host([quiet]) #button { + transform: translateX( + var( + --mod-search-quiet-button-offset, + var(--spectrum-search-quiet-button-offset) + ) + ); } :host([quiet]) #textfield .input { @@ -301,6 +302,10 @@ governing permissions and limitations under the License. var( --mod-search-button-inline-size, var(--spectrum-search-button-inline-size) - ) - var(--spectrum-search-quiet-button-offset) + ) - + var( + --mod-search-quiet-button-offset, + var(--spectrum-search-quiet-button-offset) + ) ); } diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 9f05b50faa..11fb8152a6 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/sidenav": "^6.0.0-s2-foundations.15" + "@spectrum-css/sidenav": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css index 67fdc46170..2fa5cb6821 100644 --- a/packages/sidenav/src/sidenav-heading-overrides.css +++ b/packages/sidenav/src/sidenav-heading-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css index 67fdc46170..2fa5cb6821 100644 --- a/packages/sidenav/src/sidenav-item-overrides.css +++ b/packages/sidenav/src/sidenav-item-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css index 1486c7807e..aa58dbbc26 100644 --- a/packages/sidenav/src/sidenav-overrides.css +++ b/packages/sidenav/src/sidenav-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/slider/package.json b/packages/slider/package.json index f91b091105..ab67f2dac0 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -84,7 +84,7 @@ "@spectrum-web-components/theme": "^1.0.3" }, "devDependencies": { - "@spectrum-css/slider": "^6.0.0-s2-foundations.17" + "@spectrum-css/slider": "6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css index 0df16264ea..e32dc04442 100644 --- a/packages/slider/src/slider-overrides.css +++ b/packages/slider/src/slider-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/split-view/package.json b/packages/split-view/package.json index ad4b1490fa..97a97e000d 100644 --- a/packages/split-view/package.json +++ b/packages/split-view/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/splitview": "^6.0.0-s2-foundations.15" + "@spectrum-css/splitview": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css index bf8a6170f7..fbe86f0b75 100644 --- a/packages/split-view/src/split-view-overrides.css +++ b/packages/split-view/src/split-view-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/status-light/package.json b/packages/status-light/package.json index 404f2ead2b..ca6fefc7cf 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/statuslight": "^8.0.0-s2-foundations.15" + "@spectrum-css/statuslight": "8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css index 9e4b38fe6c..07e94b0781 100644 --- a/packages/status-light/src/status-light-overrides.css +++ b/packages/status-light/src/status-light-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/swatch/package.json b/packages/swatch/package.json index 2e93224e6d..faf36213c7 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -77,8 +77,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/swatch": "^7.0.0-s2-foundations.17", - "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.15" + "@spectrum-css/swatch": "7.0.0-s2-foundations.17", + "@spectrum-css/swatchgroup": "4.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css index 74e554f225..2f73d06b16 100644 --- a/packages/swatch/src/swatch-group-overrides.css +++ b/packages/swatch/src/swatch-group-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index 82354bbb92..edd3e96b84 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/switch/package.json b/packages/switch/package.json index 84bdba96b6..1cf7dce698 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/checkbox": "^1.0.3" }, "devDependencies": { - "@spectrum-css/switch": "^6.0.0-s2-foundations.16" + "@spectrum-css/switch": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css index 93e1dcb225..bf96e33c37 100644 --- a/packages/switch/src/switch-overrides.css +++ b/packages/switch/src/switch-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/table/package.json b/packages/table/package.json index 5a1503dc40..9f63dd990c 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -129,7 +129,7 @@ "@spectrum-web-components/icons-ui": "^1.0.3" }, "devDependencies": { - "@spectrum-css/table": "^7.0.0-s2-foundations.17" + "@spectrum-css/table": "7.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css index ec09c68a16..b43c1c2bfa 100644 --- a/packages/table/src/table-overrides.css +++ b/packages/table/src/table-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 9cbde11e0f..546ee6a058 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -95,7 +95,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tabs": "^6.0.0-s2-foundations.16" + "@spectrum-css/tabs": "6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tabs/src/tabs-overrides.css b/packages/tabs/src/tabs-overrides.css index 455c65120b..0b371c8780 100644 --- a/packages/tabs/src/tabs-overrides.css +++ b/packages/tabs/src/tabs-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tabs/src/tabs-sizes-overrides.css b/packages/tabs/src/tabs-sizes-overrides.css index 695c157fe6..b1ac5fdf04 100644 --- a/packages/tabs/src/tabs-sizes-overrides.css +++ b/packages/tabs/src/tabs-sizes-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tags/package.json b/packages/tags/package.json index 67489f2dac..440fbff8c9 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -74,8 +74,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tag": "^10.0.0-s2-foundations.15", - "@spectrum-css/taggroup": "^6.0.0-s2-foundations.15" + "@spectrum-css/tag": "10.0.0-s2-foundations.15", + "@spectrum-css/taggroup": "6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css index 92c47e8592..e26f789802 100644 --- a/packages/tags/src/tag-overrides.css +++ b/packages/tags/src/tag-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tags/src/tags-overrides.css b/packages/tags/src/tags-overrides.css index 7b87e2f6fa..be6f3ee986 100644 --- a/packages/tags/src/tags-overrides.css +++ b/packages/tags/src/tags-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/textfield/package.json b/packages/textfield/package.json index 0c53e425dc..c715ae62a9 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/textfield": "^8.0.0-s2-foundations.16" + "@spectrum-css/textfield": "8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css index 33537fecb1..8b6f36a225 100644 --- a/packages/textfield/src/textfield-overrides.css +++ b/packages/textfield/src/textfield-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/toast/package.json b/packages/toast/package.json index d7d0bc767f..1eac8a7c85 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/toast": "^11.0.0-s2-foundations.15" + "@spectrum-css/toast": "11.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css index bfc90e3680..3e680e0ee0 100644 --- a/packages/toast/src/toast-overrides.css +++ b/packages/toast/src/toast-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 2411a6196c..e57bcba559 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -68,7 +68,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tooltip": "^7.0.0-s2-foundations.15" + "@spectrum-css/tooltip": "7.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css index 2b78b654c7..8688f61963 100644 --- a/packages/tooltip/src/tooltip-overrides.css +++ b/packages/tooltip/src/tooltip-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/tray/package.json b/packages/tray/package.json index 3dc663bc41..529b46ff65 100644 --- a/packages/tray/package.json +++ b/packages/tray/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/underlay": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tray": "^4.0.0-s2-foundations.15" + "@spectrum-css/tray": "4.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tray/src/tray-overrides.css b/packages/tray/src/tray-overrides.css index e4675d827c..84349a3825 100644 --- a/packages/tray/src/tray-overrides.css +++ b/packages/tray/src/tray-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/packages/underlay/package.json b/packages/underlay/package.json index 647bebc66f..bea192adc7 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/underlay": "^5.0.0-s2-foundations.15" + "@spectrum-css/underlay": "5.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/underlay/src/underlay-overrides.css b/packages/underlay/src/underlay-overrides.css index 12ae6f7f93..a79612e6db 100644 --- a/packages/underlay/src/underlay-overrides.css +++ b/packages/underlay/src/underlay-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/projects/documentation/scripts/build-css.js b/projects/documentation/scripts/build-css.js index 7431982681..9ccc193f75 100644 --- a/projects/documentation/scripts/build-css.js +++ b/projects/documentation/scripts/build-css.js @@ -32,7 +32,7 @@ const outDir = path.resolve(projectDir, '_site'); const { files } = yargs(hideBin(process.argv)).argv; async function bundle(fileName) { - let { code, map } = await bundleAsync({ + return bundleAsync({ filename: fileName, minify: true, errorRecovery: true, @@ -52,13 +52,12 @@ async function bundle(fileName) { }, }, }); - return { code, map }; } async function main() { for await (const cssSource of await fg(`${projectDir}/${files}`)) { const fileName = cssSource.split(path.sep).at(-1); - const { code, map } = await bundle(cssSource); + const { code } = await bundle(cssSource); await fs.writeFile(path.resolve(outDir, fileName), code); } process.exit(0); diff --git a/projects/documentation/src/components/styles.css b/projects/documentation/src/components/styles.css index 7577c6f13b..c146ffef06 100644 --- a/projects/documentation/src/components/styles.css +++ b/projects/documentation/src/components/styles.css @@ -13,6 +13,7 @@ governing permissions and limitations under the License. @import '@spectrum-web-components/styles/tokens/global-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'; +@import '@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'; @import '@spectrum-web-components/styles/src/spectrum-heading.css'; @import '@spectrum-web-components/styles/src/heading-overrides.css'; @import '@spectrum-web-components/styles/src/spectrum-body.css'; diff --git a/scripts/generate-tokens-wrapper.js b/scripts/generate-tokens-wrapper.js index 1df6d2276a..887f020871 100644 --- a/scripts/generate-tokens-wrapper.js +++ b/scripts/generate-tokens-wrapper.js @@ -9,25 +9,55 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + import fg from 'fast-glob'; +import { transform } from 'lightningcss'; +import prettier from 'prettier'; +import { rimrafSync } from 'rimraf'; + import fs from 'fs-extra'; import path from 'path'; import { fileURLToPath } from 'url'; +import { createRequire } from 'node:module'; +import 'colors'; +const fsp = fs.promises; +const require = createRequire(import.meta.url); const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const tokensRoot = (tokensDir) => { - return path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - tokensDir, - 'dist', - 'css', - '**', - '*.css' - ); +const rootDir = path.join(__dirname, '..'); + +const prettierSettings = { + parser: 'css', + printWidth: 80, + tabWidth: 4, + semi: true, + singleQuote: true, + trailingComma: 'es5', + bracketSpacing: true, + arrowParens: 'always', + htmlWhitespaceSensitivity: 'ignore', +}; + +const log = { + info: (message) => console.log(`${'ℹ'.cyan} ${message}`), + success: (message) => console.log(`${'✓'.green} ${message}`), + warn: (message) => console.log(`${'⚠️'.yellow} ${message}`), + fail: (message) => console.log(`${'✗'.red} ${message}`), +}; + +const relativePath = (from) => path.relative(rootDir, from); + +const getPackagePath = (packageName, namespace = '@spectrum-css/') => { + let filepath; + try { + filepath = require.resolve(`${namespace}${packageName}/package.json`); + } catch (er) { + log.warn(`Could not find package ${namespace.cyan}${packageName.cyan}`); + return; + } + + return path.dirname(filepath); }; /** @todo Could generate this from CSS packages that have @spectrum-css/tokens as a dependency */ @@ -102,21 +132,24 @@ const tokenPackages = [ 'typography', ]; -const packagePaths = tokenPackages.map((packageName) => { - return path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - packageName, - 'dist', - 'themes' - ); -}); +const packagePaths = tokenPackages + .map((packageName) => getPackagePath(packageName)) + .map((filepath) => { + if (!filepath) { + return; + } + + const themeFolder = path.join(filepath, 'dist', 'themes'); + if (fs.existsSync(themeFolder)) { + return themeFolder; + } + + return; + }) + .filter(Boolean); const spectrumThemeSelectorRegExp = /(?:\.spectrum(--(?:express|light(?:est)?|dark(?:est)?|medium|large|legacy)?,?(\n|\s)*)?)+\s?\{/g; -const importantCommentRegExp = /\/\*![^*]*\*+([^\/*][^*]*\*+)*\//g; const targetHost = (css) => { /** @note Could use this regex to more permissive of class names */ @@ -135,124 +168,195 @@ const targetHost = (css) => { return css.replaceAll(spectrumThemeSelectorRegExp, ':host,\n:root {'); }; -const removeImportantComments = (css) => { - /** - * Spectrum CSS uses /*! comments that are "not" removable. - * These comments pile up in merged files, so we _need_ to remove them. - */ - return css.replaceAll(importantCommentRegExp, ''); -}; - /** - * copies @spectrum-css/dist/css/*.css and @spectrum-css/dist/css/**\/*.css - * replaces classes with :root, :host, and pastes them into - * corresponding /tools/styles/*.css and /tools/styles/tokens/**\/*.css - * @param {string} srcPath @spectrum-css/dist/css path - * @param {*} tokensDir styles/tokens path + * Core entry function for generating tokens from Spectrum CSS packages + * to be used by the sp-theme + * @param {'spectrum'|'spectrum-two'} spectrumVersion + * @param {Object} options + * @param {boolean} options.clean - Whether to clean the output directory before writing + * @returns {Promise} */ -const processTokens = (srcPath, tokensDir) => { - let css = fs.readFileSync(srcPath, 'utf8'); - const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); +export async function generateTokensWrapper( + spectrumVersion, + { clean = true } = {} +) { + const isSpectrumOne = spectrumVersion === 'spectrum'; + const tokenPaths = ['tokens', 'tokens-v2']; + const pathIdx = isSpectrumOne ? 0 : 1; + const tokenPackageName = tokenPaths[pathIdx]; + + let tokenSourcePath = getPackagePath(tokenPackageName); + if (tokenSourcePath) { + tokenSourcePath = path.join(tokenSourcePath, 'dist', 'css'); + } - css = removeImportantComments(targetHost(css)); + const outputPath = path.join(__dirname, '..', 'tools', 'styles'); - try { - fs.writeFileSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName), - css - ); - } catch (er) {} -}; -const processPackages = async (tokensDir, index) => { - const packagename = tokenPackages[index]; - - let componentLevelTokensPath = path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - tokensDir, - 'dist', - 'css', - 'components' + // Create the directories if they don't exist + if (clean) { + rimrafSync(path.join(outputPath, tokenPackageName)); + } + + // Only create express directory for tokens not tokens-v2 + if (isSpectrumOne) { + ['spectrum', 'express'].forEach((folder) => { + fs.mkdirSync(path.join(outputPath, tokenPackageName, folder), { + recursive: true, + }); + }); + } else { + fs.mkdirSync(path.join(outputPath, tokenPackageName), { + recursive: true, + }); + } + + /** + * copies @spectrum-css/dist/css/*.css and @spectrum-css/dist/css/**\/*.css + * replaces classes with :root, :host, and pastes them into + * corresponding /tools/styles/*.css and /tools/styles/tokens/**\/*.css + */ + const themeTokens = await fg( + ['*.css', 'spectrum/*.css', 'express/*.css', '!index.css'], + { cwd: tokenSourcePath } ); - return Promise.all( - ['spectrum', 'express', 'spectrum-two'].map((type) => { - const outputDir = type !== 'spectrum-two' ? 'tokens' : 'tokens-v2'; - const outputType = outputDir === 'tokens-v2' ? 'spectrum' : type; - const cssFilePath = path.join( - componentLevelTokensPath, - type, - packagename + '.css' - ); - - // check if cssFilePath exists - if (fs.existsSync(cssFilePath)) { - let content = fs.readFileSync(cssFilePath, 'utf8'); - content = removeImportantComments(targetHost(content)); - fs.appendFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - outputDir, - outputType, - 'global-vars.css' - ), - content + const promises = themeTokens.map(async (fileName) => + fsp + .readFile(path.join(tokenSourcePath, fileName), 'utf8') + .then(async (content) => { + /* If the file is empty, return */ + if (!content) { + return; + } + + const output = path.join( + outputPath, + tokenPackageName, + fileName ); - } - }) + + const { code } = await transform({ + filename: path.join(tokenSourcePath, fileName), + minify: true, + code: Buffer.from(content), + }); + + const formatted = await prettier.format( + targetHost(code.toString()), + prettierSettings + ); + + return fs + .writeFile(output, formatted, { + encoding: 'utf8', + }) + .then(() => { + log.success(`${relativePath(output).yellow} written`); + }); + }) ); -}; + + await Promise.all(promises); + + /* We are only processing component-level variables for S2 output */ + if (isSpectrumOne) { + return; + } + + return processComponentThemes(outputPath); +} /** - * Core entry function + * Every component package has a dist/themes folder with CSS files + * that need to be processed and concatenated into a single file + * - spectrum-two.css files are written to tokens-v2/spectrum/component-vars.css + * - express.css files are written to tokens/express/component-vars.css + * - spectrum.css files are written to tokens/spectrum/component-vars.css + * @param {string} outputPath + * @returns {Promise} */ -export async function generateTokensWrapper(spectrumVersion) { - const isSpectrumOne = Boolean(spectrumVersion === 'spectrum'); - const tokensDir = isSpectrumOne ? 'tokens' : 'tokens-v2'; - - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'), - { - recursive: true, +async function processComponentThemes(outputPath) { + const filename = 'component-bridge.css'; + const writeOptions = { encoding: 'utf-8' }; + const onFinished = async (outputPath) => { + if (!fs.existsSync(outputPath)) { + log.fail(`${relativePath(outputPath)} no written`); + return; } - ); - if (spectrumVersion === 'spectrum') { - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'express'), - { - recursive: true, - } + log.success(`${relativePath(outputPath).yellow} written`); + + // Format, combine, & prettify content + const content = await fsp.readFile(outputPath); + + const { code } = await transform({ + filename: outputPath, + minify: true, + code: Buffer.from(content), + }); + + const formatted = await prettier.format( + targetHost(code.toString()), + prettierSettings ); - } + return fsp.writeFile(outputPath, formatted, { encoding: 'utf8' }); + }; - fs.writeFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - tokensDir, - 'spectrum', - 'global-vars.css' - ), - '' - ); + // Create three write streams for the three different types of themes + const streams = { + spectrum: fs + .createWriteStream( + path.join(outputPath, 'tokens', 'spectrum', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished( + path.join(outputPath, 'tokens', 'spectrum', filename) + ); + }), + express: fs + .createWriteStream( + path.join(outputPath, 'tokens', 'express', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished( + path.join(outputPath, 'tokens', 'express', filename) + ); + }), + 'spectrum-two': fs + .createWriteStream( + path.join(outputPath, 'tokens-v2', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished(path.join(outputPath, 'tokens-v2', filename)); + }), + }; - for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) { - processTokens(tokensPath, tokensDir); - } - if (isSpectrumOne) { - return; + /* Iterate over each component package and concatenate the theme CSS */ + for (const filepath of packagePaths) { + const themes = fg.sync(['*.css'], { cwd: filepath, absolute: true }); + + for (const themePath of themes) { + const theme = path.basename(themePath, '.css'); + const stream = streams[theme]; + + // check if path exists + if (!fs.existsSync(themePath)) { + continue; + } + + const content = fs.readFileSync(themePath, { encoding: 'utf8' }); + + // If the content is empty, return + if (!content) { + continue; + } + + stream.write(content); + } } - return Promise.all( - packagePaths.map((_, index) => { - return processPackages(tokensDir, index); - }) - ); + + Object.values(streams).forEach((stream) => stream.end()); } diff --git a/tasks/css-tools.js b/tasks/css-tools.js index 65aa40e0be..33a6a40895 100644 --- a/tasks/css-tools.js +++ b/tasks/css-tools.js @@ -14,7 +14,37 @@ import path from 'path'; import fs from 'fs'; import { bundleAsync } from 'lightningcss'; import { fileURLToPath } from 'url'; +import { createRequire } from 'node:module'; import { stripIndent } from 'common-tags'; +import 'colors'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); + +const log = { + success: (message) => console.log(`${'✓'.green} ${message}`), + fail: (message) => console.log(`${'✗'.red} ${message}`), +}; + +const getPackagePath = (packageName) => { + let filepath; + + // Escape hatch for local packages: @spectrum-web-components + if (packageName.startsWith('@spectrum-web-components')) { + return path.resolve( + path.join(__dirname, '..', 'node_modules', packageName) + ); + } + + try { + filepath = require.resolve(packageName); + } catch (er) { + log.fail(`Could not find ${packageName} installed as a dependency`); + return new Error(er); + } + + return filepath; +}; const wrapCSSResult = (content) => { return stripIndent` @@ -26,22 +56,15 @@ const wrapCSSResult = (content) => { `; }; -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const nodeModulesDir = path.resolve(__dirname, '..', 'node_modules'); -const configPath = path.resolve(path.join(__dirname, '..', 'config')); -let header; -try { - header = fs.readFileSync(path.join(configPath, 'license.js'), 'utf8'); -} catch (error) { - throw new Error(error); +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()); } -header = header.replace('<%= YEAR %>', new Date().getFullYear()); - export const processCSS = async (cssPath) => { - let wrappedCSS = header; - console.log(cssPath); - let { code, map } = await bundleAsync({ + return bundleAsync({ filename: cssPath, minify: true, errorRecovery: true, @@ -52,16 +75,24 @@ export const processCSS = async (cssPath) => { }, resolve(specifier, from) { if (specifier.startsWith('./')) { - const resolution = path.resolve(from, '..', specifier); - return resolution; + return path.resolve(from, '..', specifier); } else { - const resolution = path.resolve(nodeModulesDir, specifier); - return resolution; + return getPackagePath(specifier); } }, }, - }); - console.log(cssPath); - wrappedCSS += wrapCSSResult(code); - fs.writeFileSync(cssPath + '.ts', wrappedCSS, 'utf-8'); + }) + .then(({ code }) => { + log.success(cssPath.yellow + ' bundled successfully'); + + fs.writeFileSync( + `${cssPath}.ts`, + header + wrapCSSResult(code), + 'utf-8' + ); + }) + .catch((er) => { + log.fail(cssPath.yellow + ' failed to bundle'); + console.error(er); + }); }; diff --git a/tasks/process-spectrum.js b/tasks/process-spectrum.js index e3276c6479..a423827791 100644 --- a/tasks/process-spectrum.js +++ b/tasks/process-spectrum.js @@ -13,7 +13,7 @@ governing permissions and limitations under the License. */ import fg from 'fast-glob'; -import chalk from 'chalk'; +import 'colors'; import { transform } from 'lightningcss'; import path from 'path'; import fs from 'fs'; @@ -67,12 +67,6 @@ const isDirAttr = (component) => { return component.type === 'attribute' && component.name === 'dir'; }; -const isFocusVisible = (component) => { - return ( - component.type === 'pseudo-class' && component.name === 'focus-visible' - ); -}; - const isFocusRing = (component) => { return component.type === 'class' && component.name === 'focus-ring'; }; @@ -181,13 +175,11 @@ async function processComponent(componentPath) { `spectrum-${conversion.fileName}.css` ); const processSelectorV2 = (selector) => { - let log = false; const matches = Array(selector.length); let injected = 0; selector.forEach((component, selectorIndex) => { let index = selectorIndex + injected; const match = [...(matches[index] || [])]; - let matched = false; if (isDirAttr(component)) { match.push({ hoist: true, @@ -199,7 +191,6 @@ async function processComponent(componentPath) { ...component, }, }); - matched = true; } else if (isFocusRing(component)) { match.push({ hoist: true, @@ -212,7 +203,6 @@ async function processComponent(componentPath) { kind: 'focus-visible', }, }); - matched = true; } conversion.components.forEach((componentConversion) => { if (Array.isArray(componentConversion.find)) { @@ -310,7 +300,6 @@ async function processComponent(componentPath) { newMatch.replace = component; } match.push(newMatch); - matched = true; } }); if (!match.length) { @@ -331,7 +320,7 @@ async function processComponent(componentPath) { * @type {import('./spectrum-css-converter').HostSelectorComponent} */ let host; - selector.forEach((componentProcesses, index) => { + selector.forEach((componentProcesses) => { const component = componentProcesses[0]; if (component.replace) { const replacenentIsHost = isHost(component.replace); @@ -385,7 +374,8 @@ async function processComponent(componentPath) { } } }); - // @ts-ignore + + // @ts-expect-error - host is defined if (host) { if ( newSelector.length && @@ -419,6 +409,7 @@ async function processComponent(componentPath) { } selectors.push(conditionSelector(newSelector)); }); + return selectors; }; @@ -445,7 +436,7 @@ async function processComponent(componentPath) { const { code } = transform({ code: Buffer.from(bridgeCss), visitor: { - // @ts-ignore + // @ts-expect-error - Rule is a valid visitor Rule(rule) { if ( !conversion.allowThemeRules && @@ -639,16 +630,16 @@ async function processComponent(componentPath) { This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 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]*\*\//, '') + `.replace(/\/\*![\w|\W]*\*\//, '') ); } } @@ -657,7 +648,7 @@ async function processComponent(componentPath) { const { code } = transform({ code: Buffer.from(sourceCSS), visitor: { - // @ts-ignore + // @ts-expect-error - Rule is a valid visitor Rule(rule) { if (!conversion.allowThemeRules && isThemeOnlyRule(rule)) { return nullRuleFromRule(rule); @@ -834,7 +825,7 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ${code} -`.replace(/\/\*\![\w|\W]*\*\//, '') +`.replace(/\/\*![\w|\W]*\*\//, '') ); } } @@ -842,7 +833,7 @@ ${code} async function processComponents() { const promises = []; // eslint-disable-next-line no-console - console.log(chalk.bold.green('Processing Spectrum Components')); + console.log('Processing Spectrum Components'.green); for (const configPath of await fg( `${root}/{packages,tools}/*/src/spectrum-config.js` )) { @@ -850,7 +841,7 @@ async function processComponents() { } await Promise.all(promises); // eslint-disable-next-line no-console - console.log(chalk.bold.green('Done')); + console.log('Done'.green); } async function main() { diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 1742be7646..9905d36792 100644 --- a/tools/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -48,7 +48,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/opacitycheckerboard": "^3.0.0-s2-foundations.13" + "@spectrum-css/opacitycheckerboard": "3.0.0-s2-foundations.13" }, "types": "./src/opacity-checkerboard.d.ts", "sideEffects": [ diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css index 1d8e8c61f3..58991f1799 100644 --- a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css index 2c75c4afd3..316a594a39 100644 --- a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/styles/package.json b/tools/styles/package.json index 88cd23d953..968e1ffb2f 100755 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -123,11 +123,11 @@ "lit": "^2.5.0 || ^3.1.3" }, "devDependencies": { - "@spectrum-css/commons": "^11.0.0-s2-foundations.15", + "@spectrum-css/commons": "11.0.0-s2-foundations.15", "@spectrum-css/expressvars": "^3.0.9", "@spectrum-css/tokens": "14.3.1", "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.27", - "@spectrum-css/typography": "^7.0.0-s2-foundations.17", + "@spectrum-css/typography": "7.0.0-s2-foundations.17", "@spectrum-css/vars": "^9.0.8" }, "customElements": "custom-elements.json", diff --git a/tools/styles/src/body-overrides.css b/tools/styles/src/body-overrides.css index b2e1c5a7a0..875493cd52 100644 --- a/tools/styles/src/body-overrides.css +++ b/tools/styles/src/body-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/styles/src/code-overrides.css b/tools/styles/src/code-overrides.css index 58d3804499..5076d488c6 100644 --- a/tools/styles/src/code-overrides.css +++ b/tools/styles/src/code-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/styles/src/detail-overrides.css b/tools/styles/src/detail-overrides.css index 9aff846cc8..480fe6d0ce 100644 --- a/tools/styles/src/detail-overrides.css +++ b/tools/styles/src/detail-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/styles/src/heading-overrides.css b/tools/styles/src/heading-overrides.css index 0ec47c8faf..55b1329b6d 100644 --- a/tools/styles/src/heading-overrides.css +++ b/tools/styles/src/heading-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/component-bridge.css similarity index 97% rename from tools/styles/tokens-v2/spectrum/global-vars.css rename to tools/styles/tokens-v2/component-bridge.css index 9c032dd2e8..a14169af59 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/component-bridge.css @@ -86,6 +86,25 @@ --system-accordion-item-content-line-height-cjk: var( --spectrum-cjk-line-height-100 ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); --system-accordion-item-height: var(--spectrum-component-height-200); --system-accordion-size-m-item-height: var(--spectrum-component-height-200); --system-accordion-disclosure-indicator-height: var( @@ -120,25 +139,6 @@ --system-accordion-size-m-item-header-bottom-to-text-space: var( --spectrum-accordion-bottom-to-text-regular-medium ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); --system-accordion-size-l-item-height: var(--spectrum-component-height-300); --system-accordion-size-l-disclosure-indicator-height: var( --spectrum-component-height-200 @@ -259,10 +259,6 @@ --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( --spectrum-accordion-bottom-to-text-spacious-extra-large ); -} - -:host, -:root { --system-action-bar-height: var(--spectrum-action-bar-height); --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); @@ -295,10 +291,6 @@ --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); -} - -:host, -:root { --system-action-button-animation-duration: var( --spectrum-animation-duration-100 ); @@ -743,16 +735,24 @@ --system-action-button-size-xl-edge-to-text-size: var( --spectrum-component-edge-to-text-300 ); -} - -:host, -:root { --system-action-group-gap-size-compact: 0; --system-action-group-horizontal-spacing-compact: -1px; --system-action-group-vertical-spacing-compact: -1px; --system-action-group-button-spacing-reset: 0; --system-action-group-border-radius-reset: 0; --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); --system-action-group-horizontal-spacing-regular: var( --spectrum-spacing-100 ); @@ -775,22 +775,6 @@ --system-action-group-size-xl-vertical-spacing-regular: var( --spectrum-spacing-100 ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); -} - -:host, -:root { --system-alert-banner-neutral-background: var( --spectrum-neutral-subdued-background-color-default ); @@ -821,10 +805,6 @@ --spectrum-negative-background-color-default ); --system-alert-banner-font-color: var(--spectrum-white); -} - -:host, -:root { --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); @@ -867,18 +847,10 @@ --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); -} - -:host, -:root { --system-asset-transition-duration: var(--spectrum-animation-duration-100); --system-asset-folder-background-color: var(--spectrum-gray-200); --system-asset-file-background-color: var(--spectrum-gray-25); --system-asset-icon-outline-color: var(--spectrum-gray-500); -} - -:host, -:root { --system-avatar-color-opacity: 1; --system-avatar-inline-size: var(--spectrum-avatar-size-100); --system-avatar-block-size: var(--spectrum-avatar-size-100); @@ -910,10 +882,6 @@ --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); -} - -:host, -:root { --system-badge-corner-radius: var(--spectrum-corner-radius-100); --system-badge-line-height: var(--spectrum-line-height-100); --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -1108,11 +1076,8 @@ --system-badge-size-xl-icon-only-spacing-horizontal: var( --spectrum-component-edge-to-visual-only-300 ); -} - -:host, -:root { --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); --system-button-border-width: var(--spectrum-border-width-200); --system-button-line-height: 1.2; --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); @@ -1122,6 +1087,7 @@ --system-button-focus-indicator-color: var( --spectrum-focus-indicator-color ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); --system-button-background-color-default: var(--spectrum-gray-50); --system-button-background-color-hover: var(--spectrum-gray-100); --system-button-background-color-down: var(--spectrum-gray-200); @@ -1817,105 +1783,76 @@ --system-button-static-black-secondary-outline-content-color-disabled: var( --spectrum-disabled-static-black-content-color ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier) ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); --system-button-size-m-min-width: calc( var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier) ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); --system-button-size-m-border-radius: var( --spectrum-component-pill-edge-to-text-100 ); - --system-button-height: var(--spectrum-component-height-100); --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); --system-button-size-m-edge-to-visual: calc( var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width) ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); --system-button-size-m-edge-to-visual-only: var( --spectrum-component-pill-edge-to-visual-only-100 ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); --system-button-size-m-edge-to-text: calc( var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width) ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); --system-button-size-m-padding-label-to-icon: var( --spectrum-text-to-visual-100 ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); --system-button-size-m-top-to-text: var( --spectrum-button-top-to-text-medium ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); --system-button-size-m-bottom-to-text: var( --spectrum-button-bottom-to-text-medium ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); --system-button-size-m-top-to-icon: var( --spectrum-component-top-to-workflow-icon-100 ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); --system-button-size-m-intended-icon-size: var( --spectrum-workflow-icon-size-100 ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); --system-button-size-l-min-width: calc( var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier) @@ -1986,20 +1923,16 @@ --system-button-size-xl-intended-icon-size: var( --spectrum-workflow-icon-size-300 ); -} - -:host, -:root { --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); --system-button-group-size-s-spacing-horizontal: var( --spectrum-spacing-200 ); --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); --system-button-group-size-l-spacing-horizontal: var( --spectrum-spacing-300 ); @@ -2008,10 +1941,6 @@ --spectrum-spacing-300 ); --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); -} - -:host, -:root { --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); --system-breadcrumbs-block-size-compact: var( --spectrum-breadcrumbs-height-compact @@ -2156,10 +2085,6 @@ --system-breadcrumbs-focus-indicator-color: var( --spectrum-focus-indicator-color ); -} - -:host, -:root { --system-checkbox-control-color-default: var(--spectrum-gray-600); --system-checkbox-control-color-hover: var(--spectrum-gray-700); --system-checkbox-control-color-down: var(--spectrum-gray-800); @@ -2210,7 +2135,7 @@ ); --system-checkbox-line-height: var(--spectrum-line-height-100); --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: 2px; + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-checkbox-focus-indicator-thickness: var( --spectrum-focus-indicator-thickness @@ -2219,6 +2144,17 @@ --system-checkbox-animation-duration: var( --spectrum-animation-duration-100 ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); --system-checkbox-font-size: var(--spectrum-font-size-100); --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); --system-checkbox-height: var(--spectrum-component-height-100); @@ -2237,17 +2173,6 @@ --system-checkbox-size-m-text-to-control: var( --spectrum-text-to-control-100 ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); --system-checkbox-size-l-height: var(--spectrum-component-height-200); --system-checkbox-size-l-control-size: var( @@ -2270,10 +2195,6 @@ --system-checkbox-size-xl-text-to-control: var( --spectrum-text-to-control-300 ); -} - -:host, -:root { --system-card-background-color: var(--spectrum-background-layer-2-color); --system-card-body-spacing: var(--spectrum-spacing-400); --system-card-title-padding-top: var(--spectrum-spacing-300); @@ -2330,14 +2251,12 @@ --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); --system-card-background-color-quiet: var(--spectrum-background-base-color); -} - -:host, -:root { --system-clear-button-background-color: transparent; --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); --system-clear-button-icon-color: var( --spectrum-neutral-content-color-default @@ -2351,54 +2270,72 @@ --system-clear-button-icon-color-key-focus: var( --spectrum-neutral-content-color-key-focus ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); --system-clear-button-size-s-height: var(--spectrum-component-height-75); --system-clear-button-size-s-width: var(--spectrum-component-height-75); --system-clear-button-size-l-height: var(--spectrum-component-height-200); --system-clear-button-size-l-width: var(--spectrum-component-height-200); --system-clear-button-size-xl-height: var(--spectrum-component-height-300); --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) ); --system-clear-button-over-background-icon-color-down: var( - --spectrum-white + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) ); --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent ); - --system-clear-button-over-background-background-color: transparent; --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-400 + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) ); --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-500 + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-500) ); --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-400 + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) ); --system-clear-button-disabled-icon-color: var( --spectrum-disabled-content-color ); --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) ); --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) ); --system-clear-button-disabled-background-color: transparent; -} - -:host, -:root { --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-100); --system-close-button-background-color-down: var(--spectrum-gray-200); @@ -2468,15 +2405,11 @@ --system-close-button-static-black-focus-indicator-color: var( --spectrum-static-black-focus-indicator-color ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); --system-close-button-size: var(--spectrum-component-height-100); --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); --system-close-button-size-l-size: var(--spectrum-component-height-200); --system-close-button-size-xl-size: var(--spectrum-component-height-300); -} - -:host, -:root { --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc( var(--spectrum-coach-indicator-ring-diameter) * 3 @@ -2528,10 +2461,6 @@ --spectrum-coach-indicator-quiet-ring-diameter ); --system-coach-indicator-quiet-animation-name: pulse-quiet; -} - -:host, -:root { --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); @@ -2567,7 +2496,7 @@ --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight + --spectrum-body-medium-font-weight ); --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); --system-coach-mark-step-font-style: var( @@ -2587,10 +2516,6 @@ --system-coach-mark-buttongroup-spacing-horizontal: var( --spectrum-spacing-100 ); -} - -:host, -:root { --system-color-area-border-radius: var( --spectrum-color-area-border-rounding ); @@ -2608,10 +2533,6 @@ --system-color-area-width: var(--spectrum-color-area-width); --system-color-area-min-width: var(--spectrum-color-area-minimum-width); --system-color-area-min-height: var(--spectrum-color-area-minimum-height); -} - -:host, -:root { --system-color-handle-size: var(--spectrum-color-handle-size); --system-color-handle-focused-size: var( --spectrum-color-handle-size-key-focus @@ -2647,10 +2568,6 @@ --system-color-handle-fill-color-disabled: var( --spectrum-disabled-background-color ); -} - -:host, -:root { --system-color-loupe-width: var(--spectrum-color-loupe-width); --system-color-loupe-height: var(--spectrum-color-loupe-height); --system-color-loupe-offset: var( @@ -2685,10 +2602,6 @@ --system-color-loupe-checkerboard-light-color: var( --spectrum-opacity-checkerboard-square-light ); -} - -:host, -:root { --system-color-slider-handle-margin-block: var( --spectrum-component-top-to-text-75 ); @@ -2705,10 +2618,6 @@ --system-color-slider-checkerboard-light-color: var( --spectrum-opacity-checkerboard-square-light ); -} - -:host, -:root { --system-color-wheel-width: var(--spectrum-color-wheel-width); --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); --system-color-wheel-height: var(--spectrum-color-wheel-width); @@ -2725,10 +2634,6 @@ var(--system-color-wheel-width) / 2 - var(--system-color-wheel-track-width) / 2 ); -} - -:host, -:root { --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); --system-combobox-border-color-focus: var(--spectrum-gray-500); @@ -2767,6 +2672,33 @@ --system-combobox-border-color-invalid-key-focus: var( --spectrum-negative-border-color-key-focus ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); --system-combobox-block-size: var(--spectrum-component-height-100); --system-combobox-size-m-block-size: var(--spectrum-component-height-100); --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); @@ -2821,33 +2753,6 @@ --system-combobox-size-m-spacing-inline-end-edge-to-text: var( --spectrum-component-edge-to-text-100 ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); --system-combobox-size-l-block-size: var(--spectrum-component-height-200); --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); --system-combobox-size-l-font-size: var(--spectrum-font-size-200); @@ -2911,25 +2816,21 @@ --system-combobox-quiet-spacing-inline-start-edge-to-text: var( --spectrum-field-edge-to-text-quiet ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); --system-combobox-quiet-spacing-label-to: var( --spectrum-field-label-to-component-quiet-medium ); --system-combobox-quiet-size-m-spacing-label-to: var( --spectrum-field-label-to-component-quiet-medium ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); --system-combobox-quiet-size-l-spacing-label-to: var( --spectrum-field-label-to-component-quiet-large ); --system-combobox-quiet-size-xl-spacing-label-to: var( --spectrum-field-label-to-component-quiet-extra-large ); -} - -:host, -:root { --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); @@ -2938,10 +2839,6 @@ ); --system-contextual-help-heading-color: var(--spectrum-heading-color); --system-contextual-help-body-color: var(--spectrum-body-color); -} - -:host, -:root { --system-dialog-fullscreen-header-text-size: 28px; --system-dialog-min-inline-size: 288px; --system-dialog-confirm-small-width: 400px; @@ -2982,10 +2879,6 @@ 26px - var(--spectrum-component-bottom-to-text-300) ); --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); -} - -:host, -:root { --system-divider-background-color-small: var(--spectrum-gray-200); --system-divider-background-color-medium: var(--spectrum-gray-200); --system-divider-background-color-large: var(--spectrum-gray-800); @@ -3007,10 +2900,6 @@ --system-divider-background-color-large-static-black: var( --spectrum-transparent-black-900 ); -} - -:host, -:root { --system-drop-zone-padding: var(--spectrum-spacing-400); --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); @@ -3074,16 +2963,8 @@ --system-drop-zone-heading-font-size-cjk: var( --spectrum-drop-zone-cjk-title-size ); -} - -:host, -:root { --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; -} - -:host, -:root { + --system-field-group-readonly-delimiter: ','; --system-field-label-color: var( --spectrum-neutral-subdued-content-color-default ); @@ -3172,10 +3053,6 @@ --system-field-label-size-xl-text-to-asterisk: var( --spectrum-field-label-text-to-asterisk-extra-large ); -} - -:host, -:root { --system-help-text-line-height: var(--spectrum-line-height-100); --system-help-text-content-color-default: var( --spectrum-neutral-subdued-content-color-default @@ -3213,30 +3090,6 @@ --system-help-text-lang-ko-line-height-cjk: var( --spectrum-cjk-line-height-100 ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); --system-help-text-size-s-min-height: var(--spectrum-component-height-75); --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); --system-help-text-size-s-font-size: var(--spectrum-font-size-75); @@ -3250,6 +3103,19 @@ --system-help-text-size-s-bottom-to-text: var( --spectrum-component-bottom-to-text-75 ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); --system-help-text-size-l-min-height: var(--spectrum-component-height-100); --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); --system-help-text-size-l-font-size: var(--spectrum-font-size-100); @@ -3282,10 +3148,6 @@ --system-help-text-size-xl-bottom-to-text: var( --spectrum-component-bottom-to-text-200 ); -} - -:host, -:root { --system-illustrated-message-description-max-inline-size: var( --spectrum-illustrated-message-maximum-width ); @@ -3343,10 +3205,6 @@ --system-illustrated-message-lang-ko-title-font-size: var( --spectrum-illustrated-message-cjk-title-size ); -} - -:host, -:root { --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); --system-icon-size-s: var(--spectrum-workflow-icon-size-75); @@ -3583,10 +3441,6 @@ --system-ui-icon-asterisk-300-icon-size: var( --spectrum-asterisk-icon-size-300 ); -} - -:host, -:root { --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); @@ -3624,6 +3478,9 @@ --system-infield-button-stacked-fill-padding-inner: var( --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium ); + --system-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); --system-infield-button-icon-color: var( --spectrum-neutral-content-color-default ); @@ -3728,10 +3585,6 @@ --system-infield-button-quiet-border-width: 0; --system-infield-button-quiet-disabled-background-color: transparent; --system-infield-button-quiet-disabled-border-color: transparent; -} - -:host, -:root { --system-link-animation-duration: var(--spectrum-animation-duration-100); --system-link-text-color-primary-default: var( --spectrum-accent-content-color-default @@ -3759,10 +3612,6 @@ ); --system-link-text-color-white: var(--spectrum-white); --system-link-text-color-black: var(--spectrum-black); -} - -:host, -:root { --system-menu-item-top-to-action: var(--spectrum-spacing-50); --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); --system-menu-item-label-line-height: var(--spectrum-line-height-100); @@ -4104,15 +3953,17 @@ --system-menu-size-xl-back-icon-margin: var( --spectrum-navigational-indicator-top-to-back-icon-extra-large ); -} - -:host, -:root { --system-meter-min-width: var(--spectrum-meter-minimum-width); --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-meter-width); + --system-meter-top-to-text: var(--spectrum-component-top-to-text); --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); --system-meter-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); --system-meter-inline-size: var(--spectrum-progressbar-size-2500); @@ -4123,20 +3974,9 @@ --system-meter-size-l-top-to-text: var( --spectrum-component-top-to-text-200 ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); -} - -:host, -:root { --system-modal-confirm-exit-animation-delay: var( --spectrum-animation-duration-0 ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); --system-modal-fullscreen-margin: 32px; --system-modal-max-height: 90vh; --system-modal-max-width: 90%; @@ -4154,10 +3994,6 @@ --system-modal-transition-animation-duration: var( --spectrum-animation-duration-100 ); -} - -:host, -:root { --system-picker-background-color-default: var(--spectrum-gray-50); --system-picker-background-color-default-open: var(--spectrum-gray-100); --system-picker-background-color-active: var(--spectrum-gray-200); @@ -4401,10 +4237,6 @@ --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( --spectrum-component-to-menu-extra-large ); -} - -:host, -:root { --system-picker-button-background-color: var(--spectrum-gray-50); --system-picker-button-background-color-hover: var(--spectrum-gray-100); --system-picker-button-background-color-down: var(--spectrum-gray-200); @@ -4515,10 +4347,6 @@ --system-picker-button-size-xl-fill-padding: var( --spectrum-field-edge-to-disclosure-icon-300 ); -} - -:host, -:root { --system-popover-border-width: var(--spectrum-border-width-100); --system-popover-animation-distance: var(--spectrum-spacing-100); --system-popover-background-color: var(--spectrum-background-layer-2-color); @@ -4541,10 +4369,6 @@ var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2 ); -} - -:host, -:root { --system-progress-bar-animation-ease-in-out-indeterminate: var( --spectrum-animation-ease-in-out ); @@ -4620,10 +4444,6 @@ --system-progress-bar-size-xl-spacing-top-to-text: var( --spectrum-component-top-to-text-300 ); -} - -:host, -:root { --system-progress-circle-track-border-color: var(--spectrum-gray-200); --system-progress-circle-fill-border-color: var( --spectrum-accent-content-color-default @@ -4657,10 +4477,6 @@ --system-progress-circle-large-thickness: var( --spectrum-progress-circle-thickness-large ); -} - -:host, -:root { --system-radio-button-border-color-default: var(--spectrum-gray-600); --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); @@ -4712,39 +4528,24 @@ --system-radio-button-checked-border-color-focus: var( --spectrum-neutral-background-color-selected-focus ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); --system-radio-label-bottom-to-text: var( --spectrum-component-bottom-to-text-100 ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium ); --system-radio-button-top-to-control: var( --spectrum-radio-button-top-to-control-medium ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); --system-radio-size-s-height: var(--spectrum-component-height-75); --system-radio-size-s-button-control-size: var( --spectrum-radio-button-control-size-small @@ -4760,6 +4561,21 @@ --spectrum-radio-button-top-to-control-small ); --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); --system-radio-size-l-height: var(--spectrum-component-height-200); --system-radio-size-l-button-control-size: var( --spectrum-radio-button-control-size-large @@ -4802,10 +4618,6 @@ --system-radio-emphasized-button-checked-border-color-focus: var( --spectrum-accent-color-1000 ); -} - -:host, -:root { --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); @@ -4851,6 +4663,13 @@ --system-search-border-color-disabled: var( --spectrum-disabled-background-color ); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); --system-search-border-radius: var(--spectrum-corner-radius-100); --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); --system-search-edge-to-visual: var( @@ -4865,13 +4684,6 @@ --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); --system-search-text-to-icon: var(--spectrum-text-to-visual-100); --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); --system-search-size-l-edge-to-visual: var( --spectrum-component-edge-to-visual-200 @@ -4895,10 +4707,6 @@ --system-search-quiet-edge-to-visual: var( --spectrum-field-edge-to-visual-quiet ); -} - -:host, -:root { --system-side-nav-focus-ring-size: var( --spectrum-focus-indicator-thickness ); @@ -5025,10 +4833,6 @@ --system-side-nav-lang-ko-header-line-height: var( --spectrum-cjk-line-height-100 ); -} - -:host, -:root { --system-slider-track-color: var(--spectrum-gray-200); --system-slider-track-fill-color: var(--spectrum-gray-700); --system-slider-ramp-track-color: var(--spectrum-gray-400); @@ -5181,10 +4985,6 @@ --spectrum-spacing-200 ); --system-slider-size-xl-value-inline-size: 22px; -} - -:host, -:root { --system-split-view-vertical-width: 100%; --system-split-view-vertical-gripper-width: 50%; --system-split-view-vertical-gripper-outer-width: 100%; @@ -5198,24 +4998,37 @@ --spectrum-focus-indicator-color ); --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: 2px; + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); --system-split-view-gripper-width: var(--spectrum-border-width-400); --system-split-view-gripper-height: 16px; --system-split-view-gripper-border-width-horizontal: 3px; --system-split-view-gripper-border-width-vertical: var( --spectrum-border-width-400 ); -} - -:host, -:root { --system-status-light-corner-radius: 50%; --system-status-light-font-weight: 400; --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var( + --spectrum-status-light-dot-size-medium + ); --system-status-light-line-height: var(--spectrum-line-height-100); --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default ); --system-status-light-subdued-content-color-default: var( --spectrum-neutral-subdued-content-color-default @@ -5280,40 +5093,6 @@ --system-status-light-nonsemantic-magenta-color: var( --spectrum-magenta-visual-color ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); --system-status-light-size-s-height: var(--spectrum-component-height-75); --system-status-light-size-s-dot-size: var( --spectrum-status-light-dot-size-small @@ -5331,6 +5110,23 @@ --system-status-light-size-s-spacing-bottom-to-label: var( --spectrum-component-bottom-to-text-75 ); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); --system-status-light-size-l-height: var(--spectrum-component-height-200); --system-status-light-size-l-dot-size: var( --spectrum-status-light-dot-size-large @@ -5365,10 +5161,6 @@ --system-status-light-size-xl-spacing-bottom-to-label: var( --spectrum-component-bottom-to-text-300 ); -} - -:host, -:root { --system-stepper-border-width: var(--spectrum-border-width-100); --system-stepper-border-color: var(--spectrum-gray-500); --system-stepper-border-color-hover: var(--spectrum-gray-600); @@ -5382,8 +5174,8 @@ --system-stepper-animation-duration: var(--spectrum-animation-duration-100); --system-stepper-buttons-border-style: none; --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-background-color: var(--spectrum-gray-25); --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-25); --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --system-stepper-buttons-border-color-keyboard-focus: var( @@ -5394,6 +5186,10 @@ ); --system-stepper-button-border-radius-reset: 0px; --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-100 + ); --system-stepper-border-color-invalid: var( --spectrum-negative-border-color-default ); @@ -5416,11 +5212,16 @@ --system-stepper-focus-indicator-color: var( --spectrum-focus-indicator-color ); + --system-stepper-button-border-color-quiet: transparent; --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); --system-stepper-button-border-width-disabled: var( --spectrum-border-width-100 ); --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); --system-stepper-button-width: var( --spectrum-in-field-button-width-stacked-medium ); @@ -5429,10 +5230,6 @@ ); --system-stepper-height: var(--spectrum-component-height-100); --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); --system-stepper-size-l-button-width: var( --spectrum-in-field-button-width-stacked-large ); @@ -5441,10 +5238,6 @@ --spectrum-in-field-button-width-stacked-extra-large ); --system-stepper-size-xl-height: var(--spectrum-component-height-300); -} - -:host, -:root { --system-swatch-border-radius: var(--spectrum-corner-radius-100); --system-swatch-focus-indicator-border-radius: var( --spectrum-corner-radius-200 @@ -5510,17 +5303,9 @@ --system-swatch-size-l-slash-thickness: var( --spectrum-swatch-slash-thickness-large ); -} - -:host, -:root { --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); -} - -:host, -:root { --system-opacity-checkerboard-dark: var( --spectrum-opacity-checkerboard-square-dark ); @@ -5531,10 +5316,6 @@ --spectrum-opacity-checkerboard-square-size ); --system-opacity-checkerboard-position: left top; -} - -:host, -:root { --system-switch-handle-border-color-default: var(--spectrum-gray-600); --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800); @@ -5618,36 +5399,6 @@ --system-switch-emphasized-handle-border-color-selected-focus: var( --spectrum-accent-color-1000 ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); --system-switch-size-s-min-height: var(--spectrum-component-height-75); --system-switch-size-s-control-width: var( --spectrum-switch-control-width-small @@ -5665,6 +5416,23 @@ --spectrum-component-top-to-text-75 ); --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); --system-switch-size-l-min-height: var(--spectrum-component-height-200); --system-switch-size-l-control-width: var( --spectrum-switch-control-width-large @@ -5699,10 +5467,6 @@ --spectrum-component-top-to-text-300 ); --system-switch-size-xl-font-size: var(--spectrum-font-size-300); -} - -:host, -:root { --system-table-header-top-to-text: var( --spectrum-table-column-header-row-top-to-text-medium ); @@ -5780,10 +5544,10 @@ --spectrum-neutral-subdued-content-color-down ); --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus + --spectrum-neutral-subdued-content-color-focus ); --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-color-hover + --spectrum-neutral-subdued-content-focus-hover ); --system-table-icon-color-key-focus: var( --spectrum-neutral-subdued-content-color-key-focus @@ -6122,11 +5886,7 @@ --system-table-quiet-row-background-color: var( --spectrum-transparent-white-25 ); -} - -:host, -:root { - --system-tabs-font-weight: var(--spectrum-regular-font-weight); + --system-tabs-font-weight: var(--spectrum-default-font-weight); --system-tabs-item-height: var(--spectrum-tab-item-height-medium); --system-tabs-item-horizontal-spacing: var( --spectrum-tab-item-to-tab-item-horizontal-medium @@ -6267,10 +6027,6 @@ --system-tabs-emphasized-selection-indicator-color: var( --spectrum-accent-content-color-default ); -} - -:host, -:root { --system-tag-border-color: var(--spectrum-gray-700); --system-tag-border-color-hover: var(--spectrum-gray-800); --system-tag-border-color-active: var(--spectrum-gray-900); @@ -6433,6 +6189,48 @@ ); --system-tag-content-color-emphasized: var(--spectrum-white); --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); --system-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); --system-tag-font-size: var(--spectrum-font-size-100); @@ -6509,48 +6307,6 @@ --system-tag-size-m-clear-button-spacing-inline-end: var( --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); @@ -6593,16 +6349,8 @@ --system-tag-size-l-clear-button-spacing-inline-end: var( --system-tag-size-large-clear-button-spacing-inline-end ); -} - -:host, -:root { --system-tag-group-item-margin-block: var(--spectrum-spacing-75); --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); -} - -:host, -:root { --system-textfield-border-color: var(--spectrum-gray-500); --system-textfield-border-color-hover: var(--spectrum-gray-600); --system-textfield-border-color-focus: var(--spectrum-gray-800); @@ -6721,6 +6469,58 @@ --system-textfield-text-area-min-block-size: var( --spectrum-text-area-minimum-height ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); --system-textfield-height: var(--spectrum-component-height-100); --system-textfield-size-m-height: var(--spectrum-component-height-100); --system-textfield-label-spacing-block-quiet: var( @@ -6819,58 +6619,6 @@ --system-textfield-size-m-text-area-min-block-size-quiet: var( --spectrum-component-height-100 ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); --system-textfield-size-l-height: var(--spectrum-component-height-200); --system-textfield-size-l-label-spacing-block-quiet: var( --spectrum-field-label-to-component-quiet-large @@ -6975,53 +6723,6 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); -} - -:host, -:root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: 2px; - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); -} - -:host, -:root { --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); @@ -7066,10 +6767,6 @@ ); --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-400); -} - -:host, -:root { --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default ); @@ -7117,12 +6814,8 @@ --system-tooltip-background-color-default: var( --system-tooltip-backgound-color-default-neutral ); -} - -:host, -:root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; --system-tray-max-inline-size: 375px; --system-tray-spacing-edge-to-safe-zone: 64px; --system-tray-entry-animation-duration: var( @@ -7133,10 +6826,6 @@ ); --system-tray-corner-radius: var(--spectrum-corner-radius-100); --system-tray-background-color: var(--spectrum-background-layer-2-color); -} - -:host, -:root { --system-underlay-background-entry-animation-delay: var( --spectrum-animation-duration-0 ); @@ -7159,10 +6848,6 @@ var(--spectrum-black-rgb), var(--spectrum-overlay-opacity) ); -} - -:host, -:root { --system-heading-sans-serif-font-family: var( --spectrum-sans-font-family-stack ); @@ -7170,10 +6855,6 @@ --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); --system-heading-size-xxs-cjk-font-size: var( --spectrum-heading-cjk-size-xxs @@ -7182,6 +6863,10 @@ --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); --system-heading-size-s-font-size: var(--spectrum-heading-size-s); --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); --system-heading-size-l-font-size: var(--spectrum-heading-size-l); --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); @@ -7201,10 +6886,10 @@ --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); --system-body-size-xs-font-size: var(--spectrum-body-size-xs); --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); --system-body-size-l-font-size: var(--spectrum-body-size-l); --system-body-size-xl-font-size: var(--spectrum-body-size-xl); --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); @@ -7215,18 +6900,18 @@ --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); --system-detail-font-size: var(--spectrum-detail-size-m); --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); --system-detail-size-l-font-size: var(--spectrum-detail-size-l); --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); --system-code-font-family: var(--spectrum-code-font-family-stack); --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); --system-code-size-xs-font-size: var(--spectrum-code-size-xs); --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); --system-code-size-l-font-size: var(--spectrum-code-size-l); --system-code-size-xl-font-size: var(--spectrum-code-size-xl); } diff --git a/tools/styles/tokens-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css index 86db64dee7..8c05cfb6eb 100644 --- a/tools/styles/tokens-v2/dark-vars.css +++ b/tools/styles/tokens-v2/dark-vars.css @@ -948,7 +948,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.15 @@ -977,15 +976,11 @@ 0.07 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.07 @@ -994,21 +989,18 @@ var(--spectrum-blue-800-rgb), 0.15 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-900 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); @@ -1016,7 +1008,6 @@ --spectrum-blue-800 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-800-rgb), 0.25 @@ -1026,6 +1017,5 @@ 0.15 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index e007b99f35..f744dc93a7 100644 --- a/tools/styles/tokens-v2/global-vars.css +++ b/tools/styles/tokens-v2/global-vars.css @@ -769,7 +769,7 @@ --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); --spectrum-heading-line-height: var(--spectrum-line-height-100); --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-top-multiplier: 0.888889; --spectrum-heading-margin-bottom-multiplier: 0.25; --spectrum-heading-color: var(--spectrum-gray-900); --spectrum-body-sans-serif-font-family: var( @@ -975,7 +975,7 @@ --spectrum-detail-size-s: var(--spectrum-font-size-50); --spectrum-detail-line-height: var(--spectrum-line-height-100); --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-top-multiplier: 0.888889; --spectrum-detail-margin-bottom-multiplier: 0.25; --spectrum-detail-letter-spacing: 0.06em; --spectrum-detail-sans-serif-text-transform: uppercase; @@ -1020,50 +1020,43 @@ --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); --spectrum-code-color: var(--spectrum-gray-800); --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-duration-0: 0s; + --spectrum-animation-duration-100: 0.13s; + --spectrum-animation-duration-200: 0.16s; + --spectrum-animation-duration-300: 0.19s; + --spectrum-animation-duration-400: 0.22s; + --spectrum-animation-duration-500: 0.25s; + --spectrum-animation-duration-600: 0.3s; + --spectrum-animation-duration-700: 0.35s; + --spectrum-animation-duration-800: 0.4s; + --spectrum-animation-duration-900: 0.45s; + --spectrum-animation-duration-1000: 0.5s; + --spectrum-animation-duration-2000: 1s; + --spectrum-animation-duration-4000: 2s; + --spectrum-animation-duration-6000: 3s; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', monaco, monospace; - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); @@ -1075,6 +1068,5 @@ --spectrum-docs-static-black-background-color: rgba( var(--spectrum-docs-static-black-background-color-rgb) ); - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css deleted file mode 100644 index 0a5a71eec6..0000000000 --- a/tools/styles/tokens-v2/index.css +++ /dev/null @@ -1,4440 +0,0 @@ -:host, -:root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-800 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-700 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-800 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-700 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-800 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-700 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-800 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-700 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-800); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-800); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); - --spectrum-blue-background-color-default: var(--spectrum-blue-800); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); - --spectrum-purple-background-color-default: var(--spectrum-purple-800); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-900); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-900); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-800); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); - --spectrum-pink-background-color-default: var(--spectrum-pink-800); - --spectrum-silver-background-color-default: var(--spectrum-silver-800); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-800 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.36; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.48; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.6; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-300 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-300 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-300 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-300 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-300 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-300 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-300 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-300 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-300 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-300 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-300 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-300 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-300 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 17, 17, 17; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 27, 27, 27; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 34, 34, 34; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 44, 44, 44; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 50, 50, 50; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 57, 57, 57; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 68, 68, 68; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 109, 109, 109; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 138, 138, 138; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 175, 175, 175; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 219, 219, 219; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 242, 242, 242; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 255, 255, 255; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 14, 23, 63; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 15, 28, 82; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 12, 33, 117; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 18, 45, 154; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 26, 58, 195; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 37, 73, 229; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 91, 248; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 69, 110, 254; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 86, 129, 255; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 105, 149, 254; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 124, 169, 252; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 152, 192, 252; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 181, 213, 253; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 213, 231, 254; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 238, 245, 255; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 255, 255, 255; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 54, 10, 3; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 68, 13, 5; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 87, 17, 7; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 115, 24, 11; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 147, 31, 17; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 177, 38, 23; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 205, 46, 29; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 230, 54, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 252, 67, 46; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 103, 86; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 134, 120; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 167, 157; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 196, 189; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 222, 219; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 255, 242, 240; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 255, 255, 255; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 49, 16, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 61, 21, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 80, 27, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 106, 36, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 135, 47, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 162, 59, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 185, 73, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 205, 86, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 224, 100, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 243, 117, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 137, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 173, 45; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 201, 116; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 225, 178; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 255, 243, 225; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 255, 255, 255; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 37, 23, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 47, 29, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 61, 39, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 83, 52, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 107, 67, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 130, 82, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 151, 97, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 169, 110, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 186, 124, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 203, 141, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 218, 159, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 235, 183, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 206, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 230, 86; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 255, 246, 195; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 255, 255, 255; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 23, 28, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 30, 36, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 39, 47, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 53, 63, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 68, 82, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 83, 100, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 97, 116, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 109, 131, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 122, 147, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 136, 164, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 151, 181, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 169, 203, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 187, 225, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 219, 240, 117; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 242, 249, 206; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 255, 255, 255; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 11, 31, 0; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 15, 38, 0; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 21, 51, 1; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 31, 67, 4; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 41, 86, 8; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 50, 105, 11; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 60, 122, 15; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 69, 138, 19; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 78, 154, 23; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 88, 172, 28; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 100, 190, 35; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 116, 213, 46; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 136, 234, 65; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 170, 251, 112; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 222, 255, 198; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 255, 255, 255; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 0, 30, 23; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 38, 29; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 51, 38; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 68, 48; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 2, 87, 58; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 3, 106, 67; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 4, 124, 75; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 6, 140, 82; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 9, 157, 89; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 14, 175, 98; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 24, 193, 110; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 57, 215, 134; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 126, 231, 172; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 189, 241, 208; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 229, 250, 236; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 255, 255, 255; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 0, 30, 27; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 0, 39, 35; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 0, 50, 44; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 67, 59; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 2, 86, 75; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 4, 105, 89; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 6, 122, 103; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 8, 138, 116; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 10, 154, 128; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 12, 173, 142; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 14, 190, 156; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 29, 214, 176; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 122, 229, 203; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 186, 241, 222; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 229, 249, 243; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 255, 255, 255; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 0, 29, 39; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 36, 49; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 48, 65; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 64, 88; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 82, 113; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 3, 99, 140; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 8, 115, 168; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 15, 128, 194; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 24, 142, 220; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 38, 159, 244; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 63, 177, 255; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 107, 199, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 152, 219, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 195, 236, 252; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 230, 248, 253; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 255, 255, 255; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 30, 0, 93; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 0, 110; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 47, 0, 140; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 62, 12, 174; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 79, 30, 209; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 95, 52, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 109, 75, 248; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 119, 97, 252; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 128, 119, 254; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 139, 141, 254; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 153, 161, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 176, 186, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 199, 208, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 223, 228, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 243, 244, 255; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 255, 255, 255; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 41, 0, 79; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 50, 0, 96; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 64, 0, 122; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 83, 0, 159; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 107, 6, 195; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 130, 34, 215; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 148, 62, 224; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 161, 84, 229; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 173, 105, 233; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 186, 127, 237; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 197, 149, 240; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 212, 176, 244; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 225, 201, 247; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 238, 224, 250; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 248, 243, 253; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 255, 255, 255; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 50, 0, 61; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 61, 0, 74; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 79, 0, 95; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 102, 9, 120; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 127, 23, 146; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 151, 38, 170; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 173, 51, 192; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 192, 64, 212; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 213, 73, 235; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 232, 91, 253; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 240, 122, 255; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 245, 159, 255; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 248, 191, 255; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 251, 219, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 253, 241, 255; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 255, 255, 255; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 59, 0, 22; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 74, 0, 27; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 93, 0, 34; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 123, 0, 45; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 152, 7, 60; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 181, 19, 76; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 207, 31, 92; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 231, 41, 105; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 51, 119; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 96, 149; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 128, 171; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 163, 194; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 193, 214; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 220, 232; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 255, 241, 246; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 255, 255, 255; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 58, 0, 37; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 71, 0, 44; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 90, 0, 57; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 115, 7, 75; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 143, 18, 97; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 171, 29, 119; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 196, 39, 138; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 220, 47, 156; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 236, 67, 175; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 251, 90, 196; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 255, 122, 210; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 255, 159, 223; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 255, 191, 234; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 255, 219, 243; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 255, 241, 250; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 255, 255, 255; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 0, 30, 33; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 0, 37, 41; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 0, 49, 54; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 0, 66, 72; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 3, 84, 92; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 5, 103, 112; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 7, 120, 131; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 9, 135, 147; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 11, 151, 164; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 13, 168, 182; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 16, 186, 202; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 64, 208, 220; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 128, 225, 231; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 183, 240, 240; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 228, 249, 249; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 255, 255, 255; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 35, 24, 8; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 44, 31, 11; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 58, 40, 14; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 78, 55, 19; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 98, 71, 30; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 115, 88, 47; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 132, 104, 61; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 148, 118, 73; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 163, 132, 84; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 181, 147, 98; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 199, 163, 112; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 222, 185, 130; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 232, 207, 169; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 242, 227, 206; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 250, 244, 236; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 255, 255, 255; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 26, 26, 26; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 33, 33, 33; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 44, 44, 44; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 59, 59, 59; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 76, 76, 76; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 92, 92, 92; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 108, 108, 108; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 123, 123, 123; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 137, 137, 137; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 152, 152, 152; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 169, 169, 169; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 190, 190, 190; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 211, 211, 211; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 229, 229, 229; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 244, 244, 244; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 255, 255, 255; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 48, 17, 4; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 59, 21, 5; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 79, 28, 7; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 100, 41, 15; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 122, 57, 28; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 143, 74, 40; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 163, 88, 52; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 179, 103, 64; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 192, 119, 80; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 206, 136, 99; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 220, 154, 118; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 232, 179, 149; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 239, 203, 183; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 246, 225, 214; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 252, 244, 239; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 255, 255, 255; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-300 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-300 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-300 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-300 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-300 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); -} - -:host, -:root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); - --spectrum-static-black-text-color: var(--spectrum-black); - --spectrum-static-white-text-color: var(--spectrum-white); - --spectrum-track-color: var(--spectrum-gray-300); - --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); - --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-0: 0px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 10px; - --spectrum-corner-radius-300: 6px; - --spectrum-corner-radius-400: 7px; - --spectrum-corner-radius-500: 8px; - --spectrum-corner-radius-600: 9px; - --spectrum-corner-radius-700: 10px; - --spectrum-corner-radius-800: 16px; - --spectrum-corner-radius-1000: 0.5; - --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); - --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); - --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); - --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); - --spectrum-corner-radius-extra-large-default: var( - --spectrum-corner-radius-800 - ); - --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); - --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); - --spectrum-corner-radius-small-size-medium: var( - --spectrum-corner-radius-100 - ); - --spectrum-corner-radius-small-size-large: var( - --spectrum-corner-radius-200 - ); - --spectrum-corner-radius-small-size-extra-large: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-extra-small: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-small: var( - --spectrum-corner-radius-400 - ); - --spectrum-corner-radius-medium-size-medium: var( - --spectrum-corner-radius-500 - ); - --spectrum-corner-radius-medium-size-large: var( - --spectrum-corner-radius-600 - ); - --spectrum-corner-radius-medium-size-extra-large: var( - --spectrum-corner-radius-700 - ); - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: adobe clean; - --spectrum-serif-font-family: adobe clean serif; - --spectrum-cjk-font-family: adobe clean han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: source code pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', monaco, monospace; - - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 16px; - --spectrum-workflow-icon-size-75: 18px; - --spectrum-workflow-icon-size-100: 24px; - --spectrum-workflow-icon-size-200: 28px; - --spectrum-workflow-icon-size-300: 30px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 7px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-visual-400: 11px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 15px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 21px; - --spectrum-component-pill-edge-to-visual-300: 28px; - --spectrum-component-pill-edge-to-visual-only-75: 6px; - --spectrum-component-pill-edge-to-visual-only-100: 8px; - --spectrum-component-pill-edge-to-visual-only-200: 11px; - --spectrum-component-pill-edge-to-visual-only-300: 15px; - --spectrum-component-pill-edge-to-text-75: 17px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 24px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 9px; - --spectrum-component-edge-to-visual-75: 11px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 15px; - --spectrum-component-edge-to-visual-300: 20px; - --spectrum-component-edge-to-visual-only-50: 5px; - --spectrum-component-edge-to-visual-only-75: 6px; - --spectrum-component-edge-to-visual-only-100: 8px; - --spectrum-component-edge-to-visual-only-200: 11px; - --spectrum-component-edge-to-visual-only-300: 15px; - --spectrum-component-edge-to-text-50: 11px; - --spectrum-component-edge-to-text-75: 13px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 18px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 5px; - --spectrum-component-top-to-workflow-icon-75: 6px; - --spectrum-component-top-to-workflow-icon-100: 8px; - --spectrum-component-top-to-workflow-icon-200: 11px; - --spectrum-component-top-to-workflow-icon-300: 15px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); -} - -:host, -:root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-800); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.12; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.16; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.2; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-100 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-200 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-200 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-200 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-200 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-200 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-200 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-200 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-200 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-200 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-200 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-200 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-200 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 255, 255, 255; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 248, 248, 248; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 243, 243, 243; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 233, 233, 233; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 225, 225, 225; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 218, 218, 218; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 198, 198, 198; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 143, 143, 143; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 113, 113, 113; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 80, 80, 80; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 41, 41, 41; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 19, 19, 19; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 0, 0, 0; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 245, 249, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 229, 240, 254; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 203, 226, 254; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 172, 207, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 142, 185, 252; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 114, 158, 253; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 93, 137, 255; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 75, 117, 255; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 59, 99, 251; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 39, 77, 234; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 29, 62, 207; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 21, 50, 173; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 16, 40, 140; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 12, 31, 105; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 14, 24, 67; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 7, 11, 30; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 255, 246, 245; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 235, 232; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 214, 209; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 188, 180; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 157, 145; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 118, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 255, 81, 61; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 240, 56, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 215, 50, 32; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 183, 40, 24; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 156, 33, 19; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 129, 27, 14; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 104, 21, 10; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 80, 16, 6; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 59, 11, 4; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 29, 5, 2; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 255, 246, 231; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 236, 207; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 255, 218, 158; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 193, 94; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 162, 19; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 252, 125, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 232, 106, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 212, 91, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 194, 78, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 167, 62, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 144, 51, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 118, 41, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 95, 32, 0; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 73, 24, 0; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 52, 18, 0; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 25, 8, 0; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 255, 248, 204; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 255, 241, 151; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 255, 222, 44; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 245, 199, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 230, 175, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 210, 149, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 193, 131, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 175, 116, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 158, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 134, 85, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 114, 72, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 93, 59, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 75, 47, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 56, 35, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 40, 25, 0; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 18, 11, 0; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 246, 251, 222; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 234, 246, 173; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 208, 236, 70; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 182, 219, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 163, 196, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 143, 172, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 128, 153, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 114, 137, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 102, 122, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 86, 103, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 73, 87, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 60, 71, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 47, 57, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 35, 43, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 25, 30, 0; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 11, 14, 0; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 235, 255, 220; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 197, 255, 156; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 157, 247, 92; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 129, 228, 58; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 110, 206, 42; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 93, 180, 31; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 82, 161, 25; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 72, 144, 20; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 64, 129, 17; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 52, 109, 12; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 44, 92, 9; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 35, 75, 6; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 27, 60, 3; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 19, 46, 0; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 12, 33, 0; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 4, 15, 0; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 237, 252, 241; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 215, 247, 225; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 173, 238, 197; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 107, 227, 162; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 43, 209, 125; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 18, 184, 103; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 11, 164, 93; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 7, 147, 85; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 5, 131, 78; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 3, 110, 69; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 2, 93, 60; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 1, 76, 52; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 0, 61, 44; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 0, 46, 34; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 0, 33, 25; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 0, 15, 12; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 235, 251, 246; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 211, 246, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 169, 237, 216; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 92, 225, 194; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 16, 207, 169; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 13, 181, 149; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 11, 162, 134; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 9, 144, 120; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 7, 129, 109; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 5, 108, 92; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 3, 92, 80; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 1, 75, 67; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 0, 60, 54; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 0, 46, 40; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 0, 33, 29; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 0, 15, 14; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 238, 250, 254; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 217, 244, 253; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 183, 231, 252; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 138, 213, 255; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 92, 192, 255; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 48, 167, 254; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 29, 149, 231; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 18, 134, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 11, 120, 179; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 4, 102, 145; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 87, 121; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 71, 98; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 57, 78; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 43, 59; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 0, 31, 43; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 0, 14, 20; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 247, 248, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 235, 238, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 216, 222, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 192, 201, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 167, 178, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 145, 151, 254; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 132, 128, 254; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 122, 106, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 113, 85, 250; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 99, 56, 238; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 84, 36, 219; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 69, 19, 191; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 55, 6, 160; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 42, 0, 129; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 31, 0, 98; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 17, 0, 54; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 251, 247, 254; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 244, 235, 252; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 235, 218, 249; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 221, 193, 246; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 208, 167, 243; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 191, 138, 238; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 178, 114, 235; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 166, 92, 231; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 154, 71, 226; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 134, 40, 217; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 115, 13, 204; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 93, 0, 177; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 75, 0, 144; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 59, 0, 111; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 44, 0, 84; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 23, 0, 45; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 254, 246, 255; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 253, 233, 255; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 250, 211, 255; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 247, 181, 255; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 243, 147, 255; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 236, 105, 255; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 77, 245; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 200, 68, 220; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 181, 57, 200; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 156, 40, 175; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 135, 27, 154; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 113, 15, 131; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 92, 4, 109; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 72, 0, 88; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 54, 0, 66; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 29, 0, 35; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 255, 245, 248; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 232, 240; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 213, 227; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 185, 208; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 152, 187; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 255, 112, 159; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 255, 72, 133; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 240, 45, 110; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 217, 35, 97; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 186, 22, 80; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 163, 5, 62; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 136, 0, 51; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 111, 0, 40; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 86, 0, 30; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 64, 0, 22; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 35, 0, 12; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 255, 246, 252; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 255, 232, 247; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 255, 211, 240; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 255, 181, 230; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 255, 148, 219; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 255, 103, 204; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 242, 76, 184; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 228, 52, 163; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 206, 42, 146; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 176, 31, 123; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 152, 22, 104; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 128, 12, 85; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 105, 3, 68; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 83, 0, 53; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 62, 0, 39; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 33, 0, 21; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 238, 251, 251; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 209, 245, 245; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 169, 236, 237; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 111, 221, 228; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 39, 202, 216; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 15, 177, 192; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 12, 158, 171; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 10, 141, 153; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 8, 126, 137; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 5, 107, 116; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 3, 90, 98; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 1, 74, 81; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 0, 59, 65; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 0, 44, 49; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 0, 32, 35; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 0, 15, 17; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 252, 247, 242; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 247, 238, 225; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 239, 221, 195; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 229, 200, 157; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 214, 177, 123; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 190, 155, 104; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 171, 138, 90; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 154, 123, 77; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 139, 109, 66; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 119, 91, 50; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 103, 76, 35; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 88, 61, 21; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 70, 49, 17; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 52, 37, 13; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 38, 26, 9; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 16, 12, 4; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 247, 247, 247; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 239, 239, 239; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 223, 223, 223; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 204, 204, 204; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 183, 183, 183; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 160, 160, 160; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 143, 143, 143; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 128, 128, 128; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 114, 114, 114; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 96, 96, 96; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 81, 81, 81; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 66, 66, 66; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 52, 52, 52; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 39, 39, 39; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 28, 28, 28; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 12, 12, 12; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 253, 247, 243; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 249, 236, 229; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 244, 218, 203; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 237, 196, 172; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 229, 170, 136; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 212, 145, 108; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 198, 126, 88; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 184, 109, 70; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 170, 94, 56; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 147, 77, 43; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 128, 62, 32; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 110, 48, 21; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 92, 35, 11; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 72, 25, 6; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 52, 18, 4; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 24, 8, 2; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-200 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-200 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-200 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-200 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 20px; - --spectrum-workflow-icon-size-200: 22px; - --spectrum-workflow-icon-size-300: 26px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 5px; - --spectrum-text-to-visual-75: 5px; - --spectrum-text-to-visual-100: 6px; - --spectrum-text-to-visual-200: 7px; - --spectrum-text-to-visual-300: 8px; - --spectrum-text-to-visual-400: 9px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 11px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 20px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 6px; - --spectrum-component-pill-edge-to-visual-only-200: 9px; - --spectrum-component-pill-edge-to-visual-only-300: 11px; - --spectrum-component-pill-edge-to-text-75: 13px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 23px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 8px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 14px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 6px; - --spectrum-component-edge-to-visual-only-200: 9px; - --spectrum-component-edge-to-visual-only-300: 11px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 10px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 17px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 6px; - --spectrum-component-top-to-workflow-icon-200: 9px; - --spectrum-component-top-to-workflow-icon-300: 11px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); -} diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css index 3d71f783c0..e2d7bd5d5e 100644 --- a/tools/styles/tokens-v2/large-vars.css +++ b/tools/styles/tokens-v2/large-vars.css @@ -540,30 +540,23 @@ --spectrum-font-size-1300: 70px; --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; --spectrum-menu-item-checkmark-height-medium: 14px; --spectrum-menu-item-checkmark-height-large: 16px; --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; --spectrum-menu-item-checkmark-width-medium: 14px; --spectrum-menu-item-checkmark-width-large: 16px; --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -572,42 +565,35 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-200 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; --spectrum-coach-indicator-ring-diameter: 20px; --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; --spectrum-treeview-item-indentation-extra-large: 30px; --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; --spectrum-dialog-confirm-hero-height: 160px; --spectrum-dialog-confirm-border-radius: 5px; --spectrum-dialog-confirm-title-text-size: 19px; --spectrum-dialog-confirm-description-text-size: 15px; --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -617,10 +603,8 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -628,7 +612,6 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -636,11 +619,8 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } diff --git a/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css index 18cd1d732a..77ba4b2e99 100644 --- a/tools/styles/tokens-v2/light-vars.css +++ b/tools/styles/tokens-v2/light-vars.css @@ -948,7 +948,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-900-rgb), 0.1 @@ -977,15 +976,11 @@ 0.06 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-800 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.06 @@ -994,21 +989,18 @@ var(--spectrum-blue-900-rgb), 0.1 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1100 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-1100 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); @@ -1016,7 +1008,6 @@ --spectrum-blue-900 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-900-rgb), 0.2 @@ -1026,6 +1017,5 @@ 0.1 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css index 6d4ef46ede..3ea3c6f025 100644 --- a/tools/styles/tokens-v2/medium-vars.css +++ b/tools/styles/tokens-v2/medium-vars.css @@ -540,30 +540,23 @@ --spectrum-font-size-1300: 60px; --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-top-to-text-medium: 7px; @@ -572,28 +565,23 @@ --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; --spectrum-coachmark-menu-mobile-display: none; --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; @@ -602,14 +590,12 @@ ); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-dash-line-height: 24px; @@ -619,10 +605,8 @@ --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -630,7 +614,6 @@ --spectrum-dial-controls-margin: 8px; --spectrum-dial-label-gap-y: 5px; --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); @@ -638,11 +621,8 @@ --spectrum-heading-size-xs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css deleted file mode 100644 index 3b5fe4f4c7..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css +++ /dev/null @@ -1,108 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css deleted file mode 100644 index 9b137abd32..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css +++ /dev/null @@ -1,109 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css deleted file mode 100644 index b21332805f..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css +++ /dev/null @@ -1,120 +0,0 @@ -:host, -:root { - /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 5px; - --spectrum-edge-to-visual-only-100: 9px; - --spectrum-edge-to-visual-only-200: 13px; - --spectrum-edge-to-visual-only-300: 16px; - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} diff --git a/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css deleted file mode 100644 index 05529d7727..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css +++ /dev/null @@ -1,108 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-800-rgb - ); /* var(--spectrum-accent-color-800);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css deleted file mode 100644 index 487524757b..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css +++ /dev/null @@ -1,121 +0,0 @@ -:host, -:root { - /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 4px; - --spectrum-edge-to-visual-only-100: 7px; - --spectrum-edge-to-visual-only-200: 10px; - --spectrum-edge-to-visual-only-300: 13px; - - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens-v2/spectrum/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css deleted file mode 100644 index 7dfeb222c0..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -:host, -:root { - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - - /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - - /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ - --spectrum-corner-radius-1000: 9999px; -} diff --git a/tools/styles/tokens/express/component-bridge.css b/tools/styles/tokens/express/component-bridge.css new file mode 100644 index 0000000000..7a478932b3 --- /dev/null +++ b/tools/styles/tokens/express/component-bridge.css @@ -0,0 +1,6913 @@ +:host, +:root { + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --system-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text + ); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --system-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 + ); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var( + --spectrum-body-size-s + ); + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 + ); + --system-accordion-size-l-item-content-font-size: var( + --spectrum-body-size-m + ); + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); + --system-accordion-size-xl-item-height: var( + --spectrum-component-height-400 + ); + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 + ); + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l + ); + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 + ); + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); + --system-accordion-compact-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 + ); + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var( + --spectrum-line-height-100 + ); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-action-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-action-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-action-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-300 + ); + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-400 + ); + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-300 + ); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-hover: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var( + --spectrum-gray-50 + ); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-hover: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-down: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-action-button-static-black-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-static-black-selected-emphasized-content-color-hover: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-down: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-focus: var( + --spectrum-gray-900 + ); + --system-action-button-static-white-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-action-button-static-white-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) + ); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 + ); + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small + ); + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 + ); + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 + ); + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 + ); + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) + ); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 + ); + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-vertical-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-alert-banner-neutral-background: var( + --spectrum-neutral-background-color-default + ); + --system-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --system-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var( + --spectrum-text-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-border-color-disabled: transparent; + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-size-m-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var( + --spectrum-spacing-200 + ); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-background-color-quiet: var(--spectrum-background-base-color); + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent + ); + --system-clear-button-over-background-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-background-color: transparent; + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var( + --spectrum-white + ); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var( + --spectrum-black + ); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-medium-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); + --system-color-area-border-radius: var( + --spectrum-color-area-border-rounding + ); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var( + --spectrum-color-control-track-width + ); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var( + --spectrum-color-handle-border-width + ); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var( + --spectrum-color-loupe-drop-shadow-y + ); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var( + --spectrum-field-label-to-component + ); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: ','; + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-l-min-height: var( + --spectrum-component-height-100 + ); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var( + --spectrum-component-height-200 + ); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var( + --spectrum-spacing-200 + ); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-up-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-up-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-up-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-up-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-up-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var( + --spectrum-asterisk-icon-size-75 + ); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var( + --spectrum-component-height-300 + ); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: transparent; + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var( + --spectrum-font-size-75 + ); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var( + --spectrum-workflow-icon-size-75 + ); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-menu-size-s-item-description-font-size: var( + --spectrum-font-size-50 + ); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-icon-width: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var( + --spectrum-font-size-300 + ); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-width: 0px; + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 + ); + --system-picker-button-border-width: 0px; + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); + --system-popover-border-width: 0; + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-300 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-size-s-border-radius: calc( + var(--spectrum-component-height-75) / 2 + ); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-search-size-m-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: calc( + var(--spectrum-component-height-200) / 2 + ); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: calc( + var(--spectrum-component-height-300) / 2 + ); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); + --system-side-nav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 + ); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var( + --spectrum-slider-track-thickness + ); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var( + --spectrum-slider-handle-size-medium + ); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var( + --spectrum-slider-handle-size-small + ); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var( + --spectrum-spacing-100 + ); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var( + --spectrum-slider-handle-size-large + ); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var( + --spectrum-component-height-300 + ); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var( + --spectrum-red-visual-color + ); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); + --system-stepper-border-width: var(--spectrum-border-width-200); + --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-hover: var(--spectrum-gray-500); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: solid; + --system-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-border-color: transparent; + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: transparent; + --system-stepper-buttons-border-color-focus: transparent; + --system-stepper-buttons-border-color-keyboard-focus: transparent; + --system-stepper-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-stepper-button-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-stepper-button-border-width: 0; + --system-stepper-button-background-color-focus: var(--spectrum-gray-400); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-300 + ); + --system-stepper-border-color-invalid: transparent; + --system-stepper-border-color-hover-invalid: transparent; + --system-stepper-border-color-focus-invalid: transparent; + --system-stepper-border-color-focus-hover-invalid: transparent; + --system-stepper-border-color-keyboard-focus-invalid: transparent; + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: 0; + --system-stepper-buttons-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-900-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-900 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-900 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var( + --spectrum-component-height-100 + ); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var( + --spectrum-component-height-200 + ); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var( + --spectrum-text-to-visual-300 + ); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); + --system-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var( + --spectrum-tab-item-top-to-text-small + ); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var( + --spectrum-tab-item-top-to-text-large + ); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-tag-size-medium-corner-radius: var( + --spectrum-component-height-100 + ); + --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-tag-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-tag-background-color-disabled: transparent; + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --system-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --system-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius + ); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-textfield-border-color: var(--spectrum-gray-400); + --system-textfield-border-color-hover: var(--spectrum-gray-500); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-200); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); + --system-toast-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var( + --spectrum-heading-cjk-size-xxs + ); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxl + ); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tools/styles/tokens/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css deleted file mode 100644 index f43989ec31..0000000000 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ /dev/null @@ -1,13 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css deleted file mode 100644 index f43989ec31..0000000000 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ /dev/null @@ -1,13 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index b5e1ea6d01..4803b7e009 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -2,10 +2,7 @@ :root { --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css deleted file mode 100644 index f6a897274d..0000000000 --- a/tools/styles/tokens/express/custom-light-vars.css +++ /dev/null @@ -1,15 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); -} diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 031b3e02a4..007e27b4dc 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -2,10 +2,7 @@ :root { --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/express/dark-vars.css b/tools/styles/tokens/express/dark-vars.css index 667dfefee0..f43989ec31 100644 --- a/tools/styles/tokens/express/dark-vars.css +++ b/tools/styles/tokens/express/dark-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-700 diff --git a/tools/styles/tokens/express/darkest-vars.css b/tools/styles/tokens/express/darkest-vars.css index 667dfefee0..f43989ec31 100644 --- a/tools/styles/tokens/express/darkest-vars.css +++ b/tools/styles/tokens/express/darkest-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-700 diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index c778395840..1b0a635be4 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -51,7238 +51,3 @@ ); --system: express; } - -:host, -:root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 - ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s - ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 - ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m - ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 - ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 - ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l - ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 - ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 - ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 - ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); -} - -:host, -:root { - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); -} - -:host, -:root { - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-border-color-disabled: transparent; - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-400 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 - ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 - ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); -} - -:host, -:root { - --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-vertical-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); -} - -:host, -:root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); -} - -:host, -:root { - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); -} - -:host, -:root { - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); -} - -:host, -:root { - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); -} - -:host, -:root { - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); -} - -:host, -:root { - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-border-color-disabled: transparent; - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-height: var(--spectrum-component-height-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); -} - -:host, -:root { - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); -} - -:host, -:root { - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); -} - -:host, -:root { - --system-checkbox-control-color-default: var(--spectrum-gray-800); - --system-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-checkbox-control-color-down: var(--spectrum-gray-900); - --system-checkbox-control-color-focus: var(--spectrum-gray-900); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); -} - -:host, -:root { - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); -} - -:host, -:root { - --system-clear-button-background-color: var(--spectrum-gray-200); - --system-clear-button-background-color-hover: var(--spectrum-gray-300); - --system-clear-button-background-color-down: var(--spectrum-gray-400); - --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white - ); - --system-clear-button-over-background-background-color: transparent; - --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-background-color: transparent; -} - -:host, -:root { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-300); - --system-close-button-background-color-down: var(--spectrum-gray-400); - --system-close-button-background-color-focus: var(--spectrum-gray-300); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); -} - -:host, -:root { - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; -} - -:host, -:root { - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); -} - -:host, -:root { - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); -} - -:host, -:root { - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); -} - -:host, -:root { - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); -} - -:host, -:root { - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); -} - -:host, -:root { - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); -} - -:host, -:root { - --system-combobox-border-color-default: var(--spectrum-gray-400); - --system-combobox-border-color-hover: var(--spectrum-gray-500); - --system-combobox-border-color-focus: var(--spectrum-gray-900); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --system-combobox-border-color-key-focus: var(--spectrum-gray-900); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); -} - -:host, -:root { - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); -} - -:host, -:root { - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); -} - -:host, -:root { - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); -} - -:host, -:root { - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); -} - -:host, -:root { - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; -} - -:host, -:root { - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); -} - -:host, -:root { - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); -} - -:host, -:root { - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); -} - -:host, -:root { - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); -} - -:host, -:root { - --system-infield-button-border-width: 0; - --system-infield-button-border-color: transparent; - --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-background-color: var(--spectrum-gray-200); - --system-infield-button-background-color-hover: var(--spectrum-gray-300); - --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-300 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; -} - -:host, -:root { - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); -} - -:host, -:root { - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); -} - -:host, -:root { - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); -} - -:host, -:root { - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - -:host, -:root { - --system-picker-background-color-default: var(--spectrum-gray-200); - --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-width: 0px; - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); -} - -:host, -:root { - --system-picker-button-background-color: var(--spectrum-gray-200); - --system-picker-button-background-color-hover: var(--spectrum-gray-300); - --system-picker-button-background-color-down: var(--spectrum-gray-400); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-button-border-color: none; - --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 - ); - --system-picker-button-border-width: 0px; - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); -} - -:host, -:root { - --system-popover-border-width: 0; - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); -} - -:host, -:root { - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); -} - -:host, -:root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); -} - -:host, -:root { - --system-radio-button-border-color-default: var(--spectrum-gray-800); - --system-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-radio-button-border-color-down: var(--spectrum-gray-900); - --system-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); -} - -:host, -:root { - --system-search-border-color-default: var(--spectrum-gray-400); - --system-search-border-color-hover: var(--spectrum-gray-500); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-size-m-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: calc( - var(--spectrum-component-height-75) / 2 - ); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: calc( - var(--spectrum-component-height-200) / 2 - ); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: calc( - var(--spectrum-component-height-300) / 2 - ); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); -} - -:host, -:root { - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); -} - -:host, -:root { - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-600); - --system-slider-ramp-track-color: var(--spectrum-gray-300); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-border-color: var(--spectrum-gray-800); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-900); - --system-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; -} - -:host, -:root { - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); -} - -:host, -:root { - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); -} - -:host, -:root { - --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-border-color: var(--spectrum-gray-400); - --system-stepper-border-color-hover: var(--spectrum-gray-500); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: solid; - --system-stepper-buttons-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color: transparent; - --system-stepper-buttons-border-color-hover: transparent; - --system-stepper-buttons-border-color-focus: transparent; - --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-stepper-button-border-width: 0; - --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-hover-invalid: transparent; - --system-stepper-border-color-focus-invalid: transparent; - --system-stepper-border-color-focus-hover-invalid: transparent; - --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); - --system-stepper-button-border-width-disabled: 0; - --system-stepper-buttons-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-300 - ); - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); -} - -:host, -:root { - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); -} - -:host, -:root { - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); -} - -:host, -:root { - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; -} - -:host, -:root { - --system-switch-handle-border-color-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-900 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-900 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); -} - -:host, -:root { - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); -} - -:host, -:root { - --system-tabs-font-weight: var(--spectrum-bold-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default - ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default - ); -} - -:host, -:root { - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); - --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var( - --spectrum-component-height-100 - ); - --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); - --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-tag-border-color-selected: var( - --spectrum-neutral-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --system-tag-background-color-disabled: transparent; - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); -} - -:host, -:root { - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); -} - -:host, -:root { - --system-textfield-border-color: var(--spectrum-gray-400); - --system-textfield-border-color-hover: var(--spectrum-gray-500); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-200); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); -} - -:host, -:root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); -} - -:host, -:root { - --system-toast-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} - -:host, -:root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-background-color-default - ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); -} - -:host, -:root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); -} - -:host, -:root { - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); -} - -:host, -:root { - --system-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); - --system-heading-size-xxs-cjk-font-size: var( - --spectrum-heading-cjk-size-xxs - ); - --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); - --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - --system-heading-size-s-font-size: var(--spectrum-heading-size-s); - --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); - --system-heading-size-l-font-size: var(--spectrum-heading-size-l); - --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); - --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); - --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); - --system-heading-size-xxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxl - ); - --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); - --system-heading-size-xxxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxxl - ); - --system-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); - --system-body-size-xs-font-size: var(--spectrum-body-size-xs); - --system-body-size-s-font-size: var(--spectrum-body-size-s); - --system-body-size-l-font-size: var(--spectrum-body-size-l); - --system-body-size-xl-font-size: var(--spectrum-body-size-xl); - --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); - --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); - --system-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-detail-font-color: var(--spectrum-detail-color); - --system-detail-font-size: var(--spectrum-detail-size-m); - --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); - --system-detail-size-l-font-size: var(--spectrum-detail-size-l); - --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); - --system-code-font-family: var(--spectrum-code-font-family-stack); - --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); - --system-code-size-xs-font-size: var(--spectrum-code-size-xs); - --system-code-size-s-font-size: var(--spectrum-code-size-s); - --system-code-size-l-font-size: var(--spectrum-code-size-l); - --system-code-size-xl-font-size: var(--spectrum-code-size-xl); -} diff --git a/tools/styles/tokens/express/index.css b/tools/styles/tokens/express/index.css deleted file mode 100644 index dc65cea659..0000000000 --- a/tools/styles/tokens/express/index.css +++ /dev/null @@ -1,225 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} - -:host, -:root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-slider-track-thickness: 4px; - --spectrum-slider-handle-gap: 0px; - --spectrum-picker-border-width: 0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; - --spectrum-in-field-button-edge-to-fill: 4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; - --spectrum-border-width-100: 2px; - --spectrum-accent-color-100: var(--spectrum-indigo-100); - --spectrum-accent-color-200: var(--spectrum-indigo-200); - --spectrum-accent-color-300: var(--spectrum-indigo-300); - --spectrum-accent-color-400: var(--spectrum-indigo-400); - --spectrum-accent-color-500: var(--spectrum-indigo-500); - --spectrum-accent-color-600: var(--spectrum-indigo-600); - --spectrum-accent-color-700: var(--spectrum-indigo-700); - --spectrum-accent-color-800: var(--spectrum-indigo-800); - --spectrum-accent-color-900: var(--spectrum-indigo-900); - --spectrum-accent-color-1000: var(--spectrum-indigo-1000); - --spectrum-accent-color-1100: var(--spectrum-indigo-1100); - --spectrum-accent-color-1200: var(--spectrum-indigo-1200); - --spectrum-accent-color-1300: var(--spectrum-indigo-1300); - --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --system: express; -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 18px; - --spectrum-checkbox-control-size-medium: 20px; - --spectrum-checkbox-control-size-large: 22px; - --spectrum-checkbox-control-size-extra-large: 26px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 10px; - --spectrum-checkbox-top-to-control-large: 14px; - --spectrum-checkbox-top-to-control-extra-large: 17px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 10px; - --spectrum-switch-top-to-control-large: 14px; - --spectrum-switch-top-to-control-extra-large: 17px; - --spectrum-radio-button-control-size-small: 18px; - --spectrum-radio-button-control-size-medium: 20px; - --spectrum-radio-button-control-size-large: 22px; - --spectrum-radio-button-control-size-extra-large: 26px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 10px; - --spectrum-radio-button-top-to-control-large: 14px; - --spectrum-radio-button-top-to-control-extra-large: 17px; - --spectrum-slider-control-height-small: 22px; - --spectrum-slider-control-height-medium: 24px; - --spectrum-slider-control-height-large: 28px; - --spectrum-slider-control-height-extra-large: 30px; - --spectrum-slider-handle-size-small: 22px; - --spectrum-slider-handle-size-medium: 24px; - --spectrum-slider-handle-size-large: 28px; - --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 4px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 12px; - --spectrum-slider-bottom-to-handle-extra-large: 15px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 16px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - - --spectrum-dialog-confirm-border-radius: 8px; - - --spectrum-dial-border-radius: 15px; - - --spectrum-assetcard-focus-ring-border-radius: 12px; -} - -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 14px; - --spectrum-checkbox-control-size-medium: 16px; - --spectrum-checkbox-control-size-large: 18px; - --spectrum-checkbox-control-size-extra-large: 20px; - --spectrum-checkbox-top-to-control-small: 5px; - --spectrum-checkbox-top-to-control-medium: 8px; - --spectrum-checkbox-top-to-control-large: 11px; - --spectrum-checkbox-top-to-control-extra-large: 14px; - --spectrum-switch-control-width-small: 25px; - --spectrum-switch-control-width-medium: 28px; - --spectrum-switch-control-width-large: 32px; - --spectrum-switch-control-width-extra-large: 35px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 5px; - --spectrum-switch-top-to-control-medium: 8px; - --spectrum-switch-top-to-control-large: 11px; - --spectrum-switch-top-to-control-extra-large: 14px; - --spectrum-radio-button-control-size-small: 14px; - --spectrum-radio-button-control-size-medium: 16px; - --spectrum-radio-button-control-size-large: 18px; - --spectrum-radio-button-control-size-extra-large: 20px; - --spectrum-radio-button-top-to-control-small: 5px; - --spectrum-radio-button-top-to-control-medium: 8px; - --spectrum-radio-button-top-to-control-large: 11px; - --spectrum-radio-button-top-to-control-extra-large: 14px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 24px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 3px; - --spectrum-slider-bottom-to-handle-medium: 6px; - --spectrum-slider-bottom-to-handle-large: 9px; - --spectrum-slider-bottom-to-handle-extra-large: 12px; - --spectrum-corner-radius-75: 3px; - --spectrum-corner-radius-100: 6px; - --spectrum-corner-radius-200: 12px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - - --spectrum-dialog-confirm-border-radius: 6px; - - --spectrum-dial-border-radius: 12px; - - --spectrum-assetcard-focus-ring-border-radius: 10px; -} diff --git a/tools/styles/tokens/express/large-vars.css b/tools/styles/tokens/express/large-vars.css index 2b61a137b6..b4d2995283 100644 --- a/tools/styles/tokens/express/large-vars.css +++ b/tools/styles/tokens/express/large-vars.css @@ -60,10 +60,7 @@ --spectrum-drop-shadow-blur: 16px; --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/light-vars.css b/tools/styles/tokens/express/light-vars.css index 04b10578e0..f6a897274d 100644 --- a/tools/styles/tokens/express/light-vars.css +++ b/tools/styles/tokens/express/light-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-900 diff --git a/tools/styles/tokens/express/medium-vars.css b/tools/styles/tokens/express/medium-vars.css index c2677d2479..81958a44c1 100644 --- a/tools/styles/tokens/express/medium-vars.css +++ b/tools/styles/tokens/express/medium-vars.css @@ -60,10 +60,7 @@ --spectrum-drop-shadow-blur: 16px; --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/global-vars.css b/tools/styles/tokens/global-vars.css index 4fe2d66fd4..19959432df 100644 --- a/tools/styles/tokens/global-vars.css +++ b/tools/styles/tokens/global-vars.css @@ -719,7 +719,7 @@ --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); --spectrum-heading-line-height: var(--spectrum-line-height-100); --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-top-multiplier: 0.888889; --spectrum-heading-margin-bottom-multiplier: 0.25; --spectrum-heading-color: var(--spectrum-gray-900); --spectrum-body-sans-serif-font-family: var( @@ -925,7 +925,7 @@ --spectrum-detail-size-s: var(--spectrum-font-size-50); --spectrum-detail-line-height: var(--spectrum-line-height-100); --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-top-multiplier: 0.888889; --spectrum-detail-margin-bottom-multiplier: 0.25; --spectrum-detail-letter-spacing: 0.06em; --spectrum-detail-sans-serif-text-transform: uppercase; diff --git a/tools/styles/tokens/index.css b/tools/styles/tokens/index.css deleted file mode 100644 index 9d84aeac9e..0000000000 --- a/tools/styles/tokens/index.css +++ /dev/null @@ -1,3360 +0,0 @@ -:host, -:root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-700 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-600 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-600 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-600 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-600 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-700); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-700); - --spectrum-pink-background-color-default: var(--spectrum-pink-700); - --spectrum-silver-background-color-default: var(--spectrum-silver-700); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-700 - ); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.36); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.48); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-25: rgb(17, 17, 17); - --spectrum-gray-50: rgb(27, 27, 27); - --spectrum-gray-75: rgb(34, 34, 34); - --spectrum-gray-100: rgb(44, 44, 44); - --spectrum-gray-200: rgb(50, 50, 50); - --spectrum-gray-300: rgb(57, 57, 57); - --spectrum-gray-400: rgb(68, 68, 68); - --spectrum-gray-500: rgb(109, 109, 109); - --spectrum-gray-600: rgb(138, 138, 138); - --spectrum-gray-700: rgb(175, 175, 175); - --spectrum-gray-800: rgb(219, 219, 219); - --spectrum-gray-900: rgb(242, 242, 242); - --spectrum-gray-1000: rgb(255, 255, 255); - --spectrum-blue-100: rgb(14, 23, 63); - --spectrum-blue-200: rgb(15, 28, 82); - --spectrum-blue-300: rgb(12, 33, 117); - --spectrum-blue-400: rgb(18, 45, 154); - --spectrum-blue-500: rgb(26, 58, 195); - --spectrum-blue-600: rgb(37, 73, 229); - --spectrum-blue-700: rgb(52, 91, 248); - --spectrum-blue-800: rgb(69, 110, 254); - --spectrum-blue-900: rgb(86, 129, 255); - --spectrum-blue-1000: rgb(105, 149, 254); - --spectrum-blue-1100: rgb(124, 169, 252); - --spectrum-blue-1200: rgb(152, 192, 252); - --spectrum-blue-1300: rgb(181, 213, 253); - --spectrum-blue-1400: rgb(213, 231, 254); - --spectrum-blue-1500: rgb(238, 245, 255); - --spectrum-blue-1600: rgb(255, 255, 255); - --spectrum-red-100: rgb(54, 10, 3); - --spectrum-red-200: rgb(68, 13, 5); - --spectrum-red-300: rgb(87, 17, 7); - --spectrum-red-400: rgb(115, 24, 11); - --spectrum-red-500: rgb(147, 31, 17); - --spectrum-red-600: rgb(177, 38, 23); - --spectrum-red-700: rgb(205, 46, 29); - --spectrum-red-800: rgb(230, 54, 35); - --spectrum-red-900: rgb(252, 67, 46); - --spectrum-red-1000: rgb(255, 103, 86); - --spectrum-red-1100: rgb(255, 134, 120); - --spectrum-red-1200: rgb(255, 167, 157); - --spectrum-red-1300: rgb(255, 196, 189); - --spectrum-red-1400: rgb(255, 222, 219); - --spectrum-red-1500: rgb(255, 242, 240); - --spectrum-red-1600: rgb(255, 255, 255); - --spectrum-orange-100: rgb(49, 16, 0); - --spectrum-orange-200: rgb(61, 21, 0); - --spectrum-orange-300: rgb(80, 27, 0); - --spectrum-orange-400: rgb(106, 36, 0); - --spectrum-orange-500: rgb(135, 47, 0); - --spectrum-orange-600: rgb(162, 59, 0); - --spectrum-orange-700: rgb(185, 73, 0); - --spectrum-orange-800: rgb(205, 86, 0); - --spectrum-orange-900: rgb(224, 100, 0); - --spectrum-orange-1000: rgb(243, 117, 0); - --spectrum-orange-1100: rgb(255, 137, 0); - --spectrum-orange-1200: rgb(255, 173, 45); - --spectrum-orange-1300: rgb(255, 201, 116); - --spectrum-orange-1400: rgb(255, 225, 178); - --spectrum-orange-1500: rgb(255, 243, 225); - --spectrum-orange-1600: rgb(255, 255, 255); - --spectrum-yellow-100: rgb(37, 23, 0); - --spectrum-yellow-200: rgb(47, 29, 0); - --spectrum-yellow-300: rgb(61, 39, 0); - --spectrum-yellow-400: rgb(83, 52, 0); - --spectrum-yellow-500: rgb(107, 67, 0); - --spectrum-yellow-600: rgb(130, 82, 0); - --spectrum-yellow-700: rgb(151, 97, 0); - --spectrum-yellow-800: rgb(169, 110, 0); - --spectrum-yellow-900: rgb(186, 124, 0); - --spectrum-yellow-1000: rgb(203, 141, 0); - --spectrum-yellow-1100: rgb(218, 159, 0); - --spectrum-yellow-1200: rgb(235, 183, 0); - --spectrum-yellow-1300: rgb(249, 206, 0); - --spectrum-yellow-1400: rgb(255, 230, 86); - --spectrum-yellow-1500: rgb(255, 246, 195); - --spectrum-yellow-1600: rgb(255, 255, 255); - --spectrum-chartreuse-100: rgb(23, 28, 0); - --spectrum-chartreuse-200: rgb(30, 36, 0); - --spectrum-chartreuse-300: rgb(39, 47, 0); - --spectrum-chartreuse-400: rgb(53, 63, 0); - --spectrum-chartreuse-500: rgb(68, 82, 0); - --spectrum-chartreuse-600: rgb(83, 100, 0); - --spectrum-chartreuse-700: rgb(97, 116, 0); - --spectrum-chartreuse-800: rgb(109, 131, 0); - --spectrum-chartreuse-900: rgb(122, 147, 0); - --spectrum-chartreuse-1000: rgb(136, 164, 0); - --spectrum-chartreuse-1100: rgb(151, 181, 0); - --spectrum-chartreuse-1200: rgb(169, 203, 0); - --spectrum-chartreuse-1300: rgb(187, 225, 0); - --spectrum-chartreuse-1400: rgb(219, 240, 117); - --spectrum-chartreuse-1500: rgb(242, 249, 206); - --spectrum-chartreuse-1600: rgb(255, 255, 255); - --spectrum-celery-100: rgb(11, 31, 0); - --spectrum-celery-200: rgb(15, 38, 0); - --spectrum-celery-300: rgb(21, 51, 1); - --spectrum-celery-400: rgb(31, 67, 4); - --spectrum-celery-500: rgb(41, 86, 8); - --spectrum-celery-600: rgb(50, 105, 11); - --spectrum-celery-700: rgb(60, 122, 15); - --spectrum-celery-800: rgb(69, 138, 19); - --spectrum-celery-900: rgb(78, 154, 23); - --spectrum-celery-1000: rgb(88, 172, 28); - --spectrum-celery-1100: rgb(100, 190, 35); - --spectrum-celery-1200: rgb(116, 213, 46); - --spectrum-celery-1300: rgb(136, 234, 65); - --spectrum-celery-1400: rgb(170, 251, 112); - --spectrum-celery-1500: rgb(222, 255, 198); - --spectrum-celery-1600: rgb(255, 255, 255); - --spectrum-green-100: rgb(0, 30, 23); - --spectrum-green-200: rgb(0, 38, 29); - --spectrum-green-300: rgb(0, 51, 38); - --spectrum-green-400: rgb(0, 68, 48); - --spectrum-green-500: rgb(2, 87, 58); - --spectrum-green-600: rgb(3, 106, 67); - --spectrum-green-700: rgb(4, 124, 75); - --spectrum-green-800: rgb(6, 140, 82); - --spectrum-green-900: rgb(9, 157, 89); - --spectrum-green-1000: rgb(14, 175, 98); - --spectrum-green-1100: rgb(24, 193, 110); - --spectrum-green-1200: rgb(57, 215, 134); - --spectrum-green-1300: rgb(126, 231, 172); - --spectrum-green-1400: rgb(189, 241, 208); - --spectrum-green-1500: rgb(229, 250, 236); - --spectrum-green-1600: rgb(255, 255, 255); - --spectrum-seafoam-100: rgb(0, 30, 27); - --spectrum-seafoam-200: rgb(0, 39, 35); - --spectrum-seafoam-300: rgb(0, 50, 44); - --spectrum-seafoam-400: rgb(0, 67, 59); - --spectrum-seafoam-500: rgb(2, 86, 75); - --spectrum-seafoam-600: rgb(4, 105, 89); - --spectrum-seafoam-700: rgb(6, 122, 103); - --spectrum-seafoam-800: rgb(8, 138, 116); - --spectrum-seafoam-900: rgb(10, 154, 128); - --spectrum-seafoam-1000: rgb(12, 173, 142); - --spectrum-seafoam-1100: rgb(14, 190, 156); - --spectrum-seafoam-1200: rgb(29, 214, 176); - --spectrum-seafoam-1300: rgb(122, 229, 203); - --spectrum-seafoam-1400: rgb(186, 241, 222); - --spectrum-seafoam-1500: rgb(229, 249, 243); - --spectrum-seafoam-1600: rgb(255, 255, 255); - --spectrum-cyan-100: rgb(0, 29, 39); - --spectrum-cyan-200: rgb(0, 36, 49); - --spectrum-cyan-300: rgb(0, 48, 65); - --spectrum-cyan-400: rgb(0, 64, 88); - --spectrum-cyan-500: rgb(0, 82, 113); - --spectrum-cyan-600: rgb(3, 99, 140); - --spectrum-cyan-700: rgb(8, 115, 168); - --spectrum-cyan-800: rgb(15, 128, 194); - --spectrum-cyan-900: rgb(24, 142, 220); - --spectrum-cyan-1000: rgb(38, 159, 244); - --spectrum-cyan-1100: rgb(63, 177, 255); - --spectrum-cyan-1200: rgb(107, 199, 255); - --spectrum-cyan-1300: rgb(152, 219, 255); - --spectrum-cyan-1400: rgb(195, 236, 252); - --spectrum-cyan-1500: rgb(230, 248, 253); - --spectrum-cyan-1600: rgb(255, 255, 255); - --spectrum-indigo-100: rgb(30, 0, 93); - --spectrum-indigo-200: rgb(35, 0, 110); - --spectrum-indigo-300: rgb(47, 0, 140); - --spectrum-indigo-400: rgb(62, 12, 174); - --spectrum-indigo-500: rgb(79, 30, 209); - --spectrum-indigo-600: rgb(95, 52, 235); - --spectrum-indigo-700: rgb(109, 75, 248); - --spectrum-indigo-800: rgb(119, 97, 252); - --spectrum-indigo-900: rgb(128, 119, 254); - --spectrum-indigo-1000: rgb(139, 141, 254); - --spectrum-indigo-1100: rgb(153, 161, 255); - --spectrum-indigo-1200: rgb(176, 186, 255); - --spectrum-indigo-1300: rgb(199, 208, 255); - --spectrum-indigo-1400: rgb(223, 228, 255); - --spectrum-indigo-1500: rgb(243, 244, 255); - --spectrum-indigo-1600: rgb(255, 255, 255); - --spectrum-purple-100: rgb(41, 0, 79); - --spectrum-purple-200: rgb(50, 0, 96); - --spectrum-purple-300: rgb(64, 0, 122); - --spectrum-purple-400: rgb(83, 0, 159); - --spectrum-purple-500: rgb(107, 6, 195); - --spectrum-purple-600: rgb(130, 34, 215); - --spectrum-purple-700: rgb(148, 62, 224); - --spectrum-purple-800: rgb(161, 84, 229); - --spectrum-purple-900: rgb(173, 105, 233); - --spectrum-purple-1000: rgb(186, 127, 237); - --spectrum-purple-1100: rgb(197, 149, 240); - --spectrum-purple-1200: rgb(212, 176, 244); - --spectrum-purple-1300: rgb(225, 201, 247); - --spectrum-purple-1400: rgb(238, 224, 250); - --spectrum-purple-1500: rgb(248, 243, 253); - --spectrum-purple-1600: rgb(255, 255, 255); - --spectrum-fuchsia-100: rgb(50, 0, 61); - --spectrum-fuchsia-200: rgb(61, 0, 74); - --spectrum-fuchsia-300: rgb(79, 0, 95); - --spectrum-fuchsia-400: rgb(102, 9, 120); - --spectrum-fuchsia-500: rgb(127, 23, 146); - --spectrum-fuchsia-600: rgb(151, 38, 170); - --spectrum-fuchsia-700: rgb(173, 51, 192); - --spectrum-fuchsia-800: rgb(192, 64, 212); - --spectrum-fuchsia-900: rgb(213, 73, 235); - --spectrum-fuchsia-1000: rgb(232, 91, 253); - --spectrum-fuchsia-1100: rgb(240, 122, 255); - --spectrum-fuchsia-1200: rgb(245, 159, 255); - --spectrum-fuchsia-1300: rgb(248, 191, 255); - --spectrum-fuchsia-1400: rgb(251, 219, 255); - --spectrum-fuchsia-1500: rgb(253, 241, 255); - --spectrum-fuchsia-1600: rgb(255, 255, 255); - --spectrum-magenta-100: rgb(59, 0, 22); - --spectrum-magenta-200: rgb(74, 0, 27); - --spectrum-magenta-300: rgb(93, 0, 34); - --spectrum-magenta-400: rgb(123, 0, 45); - --spectrum-magenta-500: rgb(152, 7, 60); - --spectrum-magenta-600: rgb(181, 19, 76); - --spectrum-magenta-700: rgb(207, 31, 92); - --spectrum-magenta-800: rgb(231, 41, 105); - --spectrum-magenta-900: rgb(255, 51, 119); - --spectrum-magenta-1000: rgb(255, 96, 149); - --spectrum-magenta-1100: rgb(255, 128, 171); - --spectrum-magenta-1200: rgb(255, 163, 194); - --spectrum-magenta-1300: rgb(255, 193, 214); - --spectrum-magenta-1400: rgb(255, 220, 232); - --spectrum-magenta-1500: rgb(255, 241, 246); - --spectrum-magenta-1600: rgb(255, 255, 255); - --spectrum-pink-100: rgb(58, 0, 37); - --spectrum-pink-200: rgb(71, 0, 44); - --spectrum-pink-300: rgb(90, 0, 57); - --spectrum-pink-400: rgb(115, 7, 75); - --spectrum-pink-500: rgb(143, 18, 97); - --spectrum-pink-600: rgb(171, 29, 119); - --spectrum-pink-700: rgb(196, 39, 138); - --spectrum-pink-800: rgb(220, 47, 156); - --spectrum-pink-900: rgb(236, 67, 175); - --spectrum-pink-1000: rgb(251, 90, 196); - --spectrum-pink-1100: rgb(255, 122, 210); - --spectrum-pink-1200: rgb(255, 159, 223); - --spectrum-pink-1300: rgb(255, 191, 234); - --spectrum-pink-1400: rgb(255, 219, 243); - --spectrum-pink-1500: rgb(255, 241, 250); - --spectrum-pink-1600: rgb(255, 255, 255); - --spectrum-turquoise-100: rgb(0, 30, 33); - --spectrum-turquoise-200: rgb(0, 37, 41); - --spectrum-turquoise-300: rgb(0, 49, 54); - --spectrum-turquoise-400: rgb(0, 66, 72); - --spectrum-turquoise-500: rgb(3, 84, 92); - --spectrum-turquoise-600: rgb(5, 103, 112); - --spectrum-turquoise-700: rgb(7, 120, 131); - --spectrum-turquoise-800: rgb(9, 135, 147); - --spectrum-turquoise-900: rgb(11, 151, 164); - --spectrum-turquoise-1000: rgb(13, 168, 182); - --spectrum-turquoise-1100: rgb(16, 186, 202); - --spectrum-turquoise-1200: rgb(64, 208, 220); - --spectrum-turquoise-1300: rgb(128, 225, 231); - --spectrum-turquoise-1400: rgb(183, 240, 240); - --spectrum-turquoise-1500: rgb(228, 249, 249); - --spectrum-turquoise-1600: rgb(255, 255, 255); - --spectrum-brown-100: rgb(35, 24, 8); - --spectrum-brown-200: rgb(44, 31, 11); - --spectrum-brown-300: rgb(58, 40, 14); - --spectrum-brown-400: rgb(78, 55, 19); - --spectrum-brown-500: rgb(98, 71, 30); - --spectrum-brown-600: rgb(115, 88, 47); - --spectrum-brown-700: rgb(132, 104, 61); - --spectrum-brown-800: rgb(148, 118, 73); - --spectrum-brown-900: rgb(163, 132, 84); - --spectrum-brown-1000: rgb(181, 147, 98); - --spectrum-brown-1100: rgb(199, 163, 112); - --spectrum-brown-1200: rgb(222, 185, 130); - --spectrum-brown-1300: rgb(232, 207, 169); - --spectrum-brown-1400: rgb(242, 227, 206); - --spectrum-brown-1500: rgb(250, 244, 236); - --spectrum-brown-1600: rgb(255, 255, 255); - --spectrum-silver-100: rgb(26, 26, 26); - --spectrum-silver-200: rgb(33, 33, 33); - --spectrum-silver-300: rgb(44, 44, 44); - --spectrum-silver-400: rgb(59, 59, 59); - --spectrum-silver-500: rgb(76, 76, 76); - --spectrum-silver-600: rgb(92, 92, 92); - --spectrum-silver-700: rgb(108, 108, 108); - --spectrum-silver-800: rgb(123, 123, 123); - --spectrum-silver-900: rgb(137, 137, 137); - --spectrum-silver-1000: rgb(152, 152, 152); - --spectrum-silver-1100: rgb(169, 169, 169); - --spectrum-silver-1200: rgb(190, 190, 190); - --spectrum-silver-1300: rgb(211, 211, 211); - --spectrum-silver-1400: rgb(229, 229, 229); - --spectrum-silver-1500: rgb(244, 244, 244); - --spectrum-silver-1600: rgb(255, 255, 255); - --spectrum-cinnamon-100: rgb(48, 17, 4); - --spectrum-cinnamon-200: rgb(59, 21, 5); - --spectrum-cinnamon-300: rgb(79, 28, 7); - --spectrum-cinnamon-400: rgb(100, 41, 15); - --spectrum-cinnamon-500: rgb(122, 57, 28); - --spectrum-cinnamon-600: rgb(143, 74, 40); - --spectrum-cinnamon-700: rgb(163, 88, 52); - --spectrum-cinnamon-800: rgb(179, 103, 64); - --spectrum-cinnamon-900: rgb(192, 119, 80); - --spectrum-cinnamon-1000: rgb(206, 136, 99); - --spectrum-cinnamon-1100: rgb(220, 154, 118); - --spectrum-cinnamon-1200: rgb(232, 179, 149); - --spectrum-cinnamon-1300: rgb(239, 203, 183); - --spectrum-cinnamon-1400: rgb(246, 225, 214); - --spectrum-cinnamon-1500: rgb(252, 244, 239); - --spectrum-cinnamon-1600: rgb(255, 255, 255); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color: rgba(255, 255, 255, 0.51); -} - -:host, -:root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white: rgb(255, 255, 255); - --spectrum-transparent-white-25: rgba(255, 255, 255, 0); - --spectrum-transparent-white-50: rgba(255, 255, 255, 0.04); - --spectrum-transparent-white-75: rgba(255, 255, 255, 0.07); - --spectrum-transparent-white-100: rgba(255, 255, 255, 0.11); - --spectrum-transparent-white-200: rgba(255, 255, 255, 0.14); - --spectrum-transparent-white-300: rgba(255, 255, 255, 0.17); - --spectrum-transparent-white-400: rgba(255, 255, 255, 0.21); - --spectrum-transparent-white-500: rgba(255, 255, 255, 0.39); - --spectrum-transparent-white-600: rgba(255, 255, 255, 0.51); - --spectrum-transparent-white-700: rgba(255, 255, 255, 0.66); - --spectrum-transparent-white-800: rgba(255, 255, 255, 0.85); - --spectrum-transparent-white-900: rgba(255, 255, 255, 0.94); - --spectrum-transparent-white-1000: rgb(255, 255, 255); - --spectrum-black: rgb(0, 0, 0); - --spectrum-transparent-black-25: rgba(0, 0, 0, 0); - --spectrum-transparent-black-50: rgba(0, 0, 0, 0.03); - --spectrum-transparent-black-75: rgba(0, 0, 0, 0.05); - --spectrum-transparent-black-100: rgba(0, 0, 0, 0.09); - --spectrum-transparent-black-200: rgba(0, 0, 0, 0.12); - --spectrum-transparent-black-300: rgba(0, 0, 0, 0.15); - --spectrum-transparent-black-400: rgba(0, 0, 0, 0.22); - --spectrum-transparent-black-500: rgba(0, 0, 0, 0.44); - --spectrum-transparent-black-600: rgba(0, 0, 0, 0.56); - --spectrum-transparent-black-700: rgba(0, 0, 0, 0.69); - --spectrum-transparent-black-800: rgba(0, 0, 0, 0.84); - --spectrum-transparent-black-900: rgba(0, 0, 0, 0.93); - --spectrum-transparent-black-1000: rgb(0, 0, 0); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-color-200 - ); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color: rgb(15, 121, 125); - --spectrum-docs-static-black-background-color: rgb(181, 209, 211); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} - -:host, -:root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.12); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.16); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-25: rgb(255, 255, 255); - --spectrum-gray-50: rgb(248, 248, 248); - --spectrum-gray-75: rgb(243, 243, 243); - --spectrum-gray-100: rgb(233, 233, 233); - --spectrum-gray-200: rgb(225, 225, 225); - --spectrum-gray-300: rgb(218, 218, 218); - --spectrum-gray-400: rgb(198, 198, 198); - --spectrum-gray-500: rgb(143, 143, 143); - --spectrum-gray-600: rgb(113, 113, 113); - --spectrum-gray-700: rgb(80, 80, 80); - --spectrum-gray-800: rgb(41, 41, 41); - --spectrum-gray-900: rgb(19, 19, 19); - --spectrum-gray-1000: rgb(0, 0, 0); - --spectrum-blue-100: rgb(245, 249, 255); - --spectrum-blue-200: rgb(229, 240, 254); - --spectrum-blue-300: rgb(203, 226, 254); - --spectrum-blue-400: rgb(172, 207, 253); - --spectrum-blue-500: rgb(142, 185, 252); - --spectrum-blue-600: rgb(114, 158, 253); - --spectrum-blue-700: rgb(93, 137, 255); - --spectrum-blue-800: rgb(75, 117, 255); - --spectrum-blue-900: rgb(59, 99, 251); - --spectrum-blue-1000: rgb(39, 77, 234); - --spectrum-blue-1100: rgb(29, 62, 207); - --spectrum-blue-1200: rgb(21, 50, 173); - --spectrum-blue-1300: rgb(16, 40, 140); - --spectrum-blue-1400: rgb(12, 31, 105); - --spectrum-blue-1500: rgb(14, 24, 67); - --spectrum-blue-1600: rgb(7, 11, 30); - --spectrum-red-100: rgb(255, 246, 245); - --spectrum-red-200: rgb(255, 235, 232); - --spectrum-red-300: rgb(255, 214, 209); - --spectrum-red-400: rgb(255, 188, 180); - --spectrum-red-500: rgb(255, 157, 145); - --spectrum-red-600: rgb(255, 118, 101); - --spectrum-red-700: rgb(255, 81, 61); - --spectrum-red-800: rgb(240, 56, 35); - --spectrum-red-900: rgb(215, 50, 32); - --spectrum-red-1000: rgb(183, 40, 24); - --spectrum-red-1100: rgb(156, 33, 19); - --spectrum-red-1200: rgb(129, 27, 14); - --spectrum-red-1300: rgb(104, 21, 10); - --spectrum-red-1400: rgb(80, 16, 6); - --spectrum-red-1500: rgb(59, 11, 4); - --spectrum-red-1600: rgb(29, 5, 2); - --spectrum-orange-100: rgb(255, 246, 231); - --spectrum-orange-200: rgb(255, 236, 207); - --spectrum-orange-300: rgb(255, 218, 158); - --spectrum-orange-400: rgb(255, 193, 94); - --spectrum-orange-500: rgb(255, 162, 19); - --spectrum-orange-600: rgb(252, 125, 0); - --spectrum-orange-700: rgb(232, 106, 0); - --spectrum-orange-800: rgb(212, 91, 0); - --spectrum-orange-900: rgb(194, 78, 0); - --spectrum-orange-1000: rgb(167, 62, 0); - --spectrum-orange-1100: rgb(144, 51, 0); - --spectrum-orange-1200: rgb(118, 41, 0); - --spectrum-orange-1300: rgb(95, 32, 0); - --spectrum-orange-1400: rgb(73, 24, 0); - --spectrum-orange-1500: rgb(52, 18, 0); - --spectrum-orange-1600: rgb(25, 8, 0); - --spectrum-yellow-100: rgb(255, 248, 204); - --spectrum-yellow-200: rgb(255, 241, 151); - --spectrum-yellow-300: rgb(255, 222, 44); - --spectrum-yellow-400: rgb(245, 199, 0); - --spectrum-yellow-500: rgb(230, 175, 0); - --spectrum-yellow-600: rgb(210, 149, 0); - --spectrum-yellow-700: rgb(193, 131, 0); - --spectrum-yellow-800: rgb(175, 116, 0); - --spectrum-yellow-900: rgb(158, 102, 0); - --spectrum-yellow-1000: rgb(134, 85, 0); - --spectrum-yellow-1100: rgb(114, 72, 0); - --spectrum-yellow-1200: rgb(93, 59, 0); - --spectrum-yellow-1300: rgb(75, 47, 0); - --spectrum-yellow-1400: rgb(56, 35, 0); - --spectrum-yellow-1500: rgb(40, 25, 0); - --spectrum-yellow-1600: rgb(18, 11, 0); - --spectrum-chartreuse-100: rgb(246, 251, 222); - --spectrum-chartreuse-200: rgb(234, 246, 173); - --spectrum-chartreuse-300: rgb(208, 236, 70); - --spectrum-chartreuse-400: rgb(182, 219, 0); - --spectrum-chartreuse-500: rgb(163, 196, 0); - --spectrum-chartreuse-600: rgb(143, 172, 0); - --spectrum-chartreuse-700: rgb(128, 153, 0); - --spectrum-chartreuse-800: rgb(114, 137, 0); - --spectrum-chartreuse-900: rgb(102, 122, 0); - --spectrum-chartreuse-1000: rgb(86, 103, 0); - --spectrum-chartreuse-1100: rgb(73, 87, 0); - --spectrum-chartreuse-1200: rgb(60, 71, 0); - --spectrum-chartreuse-1300: rgb(47, 57, 0); - --spectrum-chartreuse-1400: rgb(35, 43, 0); - --spectrum-chartreuse-1500: rgb(25, 30, 0); - --spectrum-chartreuse-1600: rgb(11, 14, 0); - --spectrum-celery-100: rgb(235, 255, 220); - --spectrum-celery-200: rgb(197, 255, 156); - --spectrum-celery-300: rgb(157, 247, 92); - --spectrum-celery-400: rgb(129, 228, 58); - --spectrum-celery-500: rgb(110, 206, 42); - --spectrum-celery-600: rgb(93, 180, 31); - --spectrum-celery-700: rgb(82, 161, 25); - --spectrum-celery-800: rgb(72, 144, 20); - --spectrum-celery-900: rgb(64, 129, 17); - --spectrum-celery-1000: rgb(52, 109, 12); - --spectrum-celery-1100: rgb(44, 92, 9); - --spectrum-celery-1200: rgb(35, 75, 6); - --spectrum-celery-1300: rgb(27, 60, 3); - --spectrum-celery-1400: rgb(19, 46, 0); - --spectrum-celery-1500: rgb(12, 33, 0); - --spectrum-celery-1600: rgb(4, 15, 0); - --spectrum-green-100: rgb(237, 252, 241); - --spectrum-green-200: rgb(215, 247, 225); - --spectrum-green-300: rgb(173, 238, 197); - --spectrum-green-400: rgb(107, 227, 162); - --spectrum-green-500: rgb(43, 209, 125); - --spectrum-green-600: rgb(18, 184, 103); - --spectrum-green-700: rgb(11, 164, 93); - --spectrum-green-800: rgb(7, 147, 85); - --spectrum-green-900: rgb(5, 131, 78); - --spectrum-green-1000: rgb(3, 110, 69); - --spectrum-green-1100: rgb(2, 93, 60); - --spectrum-green-1200: rgb(1, 76, 52); - --spectrum-green-1300: rgb(0, 61, 44); - --spectrum-green-1400: rgb(0, 46, 34); - --spectrum-green-1500: rgb(0, 33, 25); - --spectrum-green-1600: rgb(0, 15, 12); - --spectrum-seafoam-100: rgb(235, 251, 246); - --spectrum-seafoam-200: rgb(211, 246, 234); - --spectrum-seafoam-300: rgb(169, 237, 216); - --spectrum-seafoam-400: rgb(92, 225, 194); - --spectrum-seafoam-500: rgb(16, 207, 169); - --spectrum-seafoam-600: rgb(13, 181, 149); - --spectrum-seafoam-700: rgb(11, 162, 134); - --spectrum-seafoam-800: rgb(9, 144, 120); - --spectrum-seafoam-900: rgb(7, 129, 109); - --spectrum-seafoam-1000: rgb(5, 108, 92); - --spectrum-seafoam-1100: rgb(3, 92, 80); - --spectrum-seafoam-1200: rgb(1, 75, 67); - --spectrum-seafoam-1300: rgb(0, 60, 54); - --spectrum-seafoam-1400: rgb(0, 46, 40); - --spectrum-seafoam-1500: rgb(0, 33, 29); - --spectrum-seafoam-1600: rgb(0, 15, 14); - --spectrum-cyan-100: rgb(238, 250, 254); - --spectrum-cyan-200: rgb(217, 244, 253); - --spectrum-cyan-300: rgb(183, 231, 252); - --spectrum-cyan-400: rgb(138, 213, 255); - --spectrum-cyan-500: rgb(92, 192, 255); - --spectrum-cyan-600: rgb(48, 167, 254); - --spectrum-cyan-700: rgb(29, 149, 231); - --spectrum-cyan-800: rgb(18, 134, 205); - --spectrum-cyan-900: rgb(11, 120, 179); - --spectrum-cyan-1000: rgb(4, 102, 145); - --spectrum-cyan-1100: rgb(0, 87, 121); - --spectrum-cyan-1200: rgb(0, 71, 98); - --spectrum-cyan-1300: rgb(0, 57, 78); - --spectrum-cyan-1400: rgb(0, 43, 59); - --spectrum-cyan-1500: rgb(0, 31, 43); - --spectrum-cyan-1600: rgb(0, 14, 20); - --spectrum-indigo-100: rgb(247, 248, 255); - --spectrum-indigo-200: rgb(235, 238, 255); - --spectrum-indigo-300: rgb(216, 222, 255); - --spectrum-indigo-400: rgb(192, 201, 255); - --spectrum-indigo-500: rgb(167, 178, 255); - --spectrum-indigo-600: rgb(145, 151, 254); - --spectrum-indigo-700: rgb(132, 128, 254); - --spectrum-indigo-800: rgb(122, 106, 253); - --spectrum-indigo-900: rgb(113, 85, 250); - --spectrum-indigo-1000: rgb(99, 56, 238); - --spectrum-indigo-1100: rgb(84, 36, 219); - --spectrum-indigo-1200: rgb(69, 19, 191); - --spectrum-indigo-1300: rgb(55, 6, 160); - --spectrum-indigo-1400: rgb(42, 0, 129); - --spectrum-indigo-1500: rgb(31, 0, 98); - --spectrum-indigo-1600: rgb(17, 0, 54); - --spectrum-purple-100: rgb(251, 247, 254); - --spectrum-purple-200: rgb(244, 235, 252); - --spectrum-purple-300: rgb(235, 218, 249); - --spectrum-purple-400: rgb(221, 193, 246); - --spectrum-purple-500: rgb(208, 167, 243); - --spectrum-purple-600: rgb(191, 138, 238); - --spectrum-purple-700: rgb(178, 114, 235); - --spectrum-purple-800: rgb(166, 92, 231); - --spectrum-purple-900: rgb(154, 71, 226); - --spectrum-purple-1000: rgb(134, 40, 217); - --spectrum-purple-1100: rgb(115, 13, 204); - --spectrum-purple-1200: rgb(93, 0, 177); - --spectrum-purple-1300: rgb(75, 0, 144); - --spectrum-purple-1400: rgb(59, 0, 111); - --spectrum-purple-1500: rgb(44, 0, 84); - --spectrum-purple-1600: rgb(23, 0, 45); - --spectrum-fuchsia-100: rgb(254, 246, 255); - --spectrum-fuchsia-200: rgb(253, 233, 255); - --spectrum-fuchsia-300: rgb(250, 211, 255); - --spectrum-fuchsia-400: rgb(247, 181, 255); - --spectrum-fuchsia-500: rgb(243, 147, 255); - --spectrum-fuchsia-600: rgb(236, 105, 255); - --spectrum-fuchsia-700: rgb(223, 77, 245); - --spectrum-fuchsia-800: rgb(200, 68, 220); - --spectrum-fuchsia-900: rgb(181, 57, 200); - --spectrum-fuchsia-1000: rgb(156, 40, 175); - --spectrum-fuchsia-1100: rgb(135, 27, 154); - --spectrum-fuchsia-1200: rgb(113, 15, 131); - --spectrum-fuchsia-1300: rgb(92, 4, 109); - --spectrum-fuchsia-1400: rgb(72, 0, 88); - --spectrum-fuchsia-1500: rgb(54, 0, 66); - --spectrum-fuchsia-1600: rgb(29, 0, 35); - --spectrum-magenta-100: rgb(255, 245, 248); - --spectrum-magenta-200: rgb(255, 232, 240); - --spectrum-magenta-300: rgb(255, 213, 227); - --spectrum-magenta-400: rgb(255, 185, 208); - --spectrum-magenta-500: rgb(255, 152, 187); - --spectrum-magenta-600: rgb(255, 112, 159); - --spectrum-magenta-700: rgb(255, 72, 133); - --spectrum-magenta-800: rgb(240, 45, 110); - --spectrum-magenta-900: rgb(217, 35, 97); - --spectrum-magenta-1000: rgb(186, 22, 80); - --spectrum-magenta-1100: rgb(163, 5, 62); - --spectrum-magenta-1200: rgb(136, 0, 51); - --spectrum-magenta-1300: rgb(111, 0, 40); - --spectrum-magenta-1400: rgb(86, 0, 30); - --spectrum-magenta-1500: rgb(64, 0, 22); - --spectrum-magenta-1600: rgb(35, 0, 12); - --spectrum-pink-100: rgb(255, 246, 252); - --spectrum-pink-200: rgb(255, 232, 247); - --spectrum-pink-300: rgb(255, 211, 240); - --spectrum-pink-400: rgb(255, 181, 230); - --spectrum-pink-500: rgb(255, 148, 219); - --spectrum-pink-600: rgb(255, 103, 204); - --spectrum-pink-700: rgb(242, 76, 184); - --spectrum-pink-800: rgb(228, 52, 163); - --spectrum-pink-900: rgb(206, 42, 146); - --spectrum-pink-1000: rgb(176, 31, 123); - --spectrum-pink-1100: rgb(152, 22, 104); - --spectrum-pink-1200: rgb(128, 12, 85); - --spectrum-pink-1300: rgb(105, 3, 68); - --spectrum-pink-1400: rgb(83, 0, 53); - --spectrum-pink-1500: rgb(62, 0, 39); - --spectrum-pink-1600: rgb(33, 0, 21); - --spectrum-turquoise-100: rgb(238, 251, 251); - --spectrum-turquoise-200: rgb(209, 245, 245); - --spectrum-turquoise-300: rgb(169, 236, 237); - --spectrum-turquoise-400: rgb(111, 221, 228); - --spectrum-turquoise-500: rgb(39, 202, 216); - --spectrum-turquoise-600: rgb(15, 177, 192); - --spectrum-turquoise-700: rgb(12, 158, 171); - --spectrum-turquoise-800: rgb(10, 141, 153); - --spectrum-turquoise-900: rgb(8, 126, 137); - --spectrum-turquoise-1000: rgb(5, 107, 116); - --spectrum-turquoise-1100: rgb(3, 90, 98); - --spectrum-turquoise-1200: rgb(1, 74, 81); - --spectrum-turquoise-1300: rgb(0, 59, 65); - --spectrum-turquoise-1400: rgb(0, 44, 49); - --spectrum-turquoise-1500: rgb(0, 32, 35); - --spectrum-turquoise-1600: rgb(0, 15, 17); - --spectrum-brown-100: rgb(252, 247, 242); - --spectrum-brown-200: rgb(247, 238, 225); - --spectrum-brown-300: rgb(239, 221, 195); - --spectrum-brown-400: rgb(229, 200, 157); - --spectrum-brown-500: rgb(214, 177, 123); - --spectrum-brown-600: rgb(190, 155, 104); - --spectrum-brown-700: rgb(171, 138, 90); - --spectrum-brown-800: rgb(154, 123, 77); - --spectrum-brown-900: rgb(139, 109, 66); - --spectrum-brown-1000: rgb(119, 91, 50); - --spectrum-brown-1100: rgb(103, 76, 35); - --spectrum-brown-1200: rgb(88, 61, 21); - --spectrum-brown-1300: rgb(70, 49, 17); - --spectrum-brown-1400: rgb(52, 37, 13); - --spectrum-brown-1500: rgb(38, 26, 9); - --spectrum-brown-1600: rgb(16, 12, 4); - --spectrum-silver-100: rgb(247, 247, 247); - --spectrum-silver-200: rgb(239, 239, 239); - --spectrum-silver-300: rgb(223, 223, 223); - --spectrum-silver-400: rgb(204, 204, 204); - --spectrum-silver-500: rgb(183, 183, 183); - --spectrum-silver-600: rgb(160, 160, 160); - --spectrum-silver-700: rgb(143, 143, 143); - --spectrum-silver-800: rgb(128, 128, 128); - --spectrum-silver-900: rgb(114, 114, 114); - --spectrum-silver-1000: rgb(96, 96, 96); - --spectrum-silver-1100: rgb(81, 81, 81); - --spectrum-silver-1200: rgb(66, 66, 66); - --spectrum-silver-1300: rgb(52, 52, 52); - --spectrum-silver-1400: rgb(39, 39, 39); - --spectrum-silver-1500: rgb(28, 28, 28); - --spectrum-silver-1600: rgb(12, 12, 12); - --spectrum-cinnamon-100: rgb(253, 247, 243); - --spectrum-cinnamon-200: rgb(249, 236, 229); - --spectrum-cinnamon-300: rgb(244, 218, 203); - --spectrum-cinnamon-400: rgb(237, 196, 172); - --spectrum-cinnamon-500: rgb(229, 170, 136); - --spectrum-cinnamon-600: rgb(212, 145, 108); - --spectrum-cinnamon-700: rgb(198, 126, 88); - --spectrum-cinnamon-800: rgb(184, 109, 70); - --spectrum-cinnamon-900: rgb(170, 94, 56); - --spectrum-cinnamon-1000: rgb(147, 77, 43); - --spectrum-cinnamon-1100: rgb(128, 62, 32); - --spectrum-cinnamon-1200: rgb(110, 48, 21); - --spectrum-cinnamon-1300: rgb(92, 35, 11); - --spectrum-cinnamon-1400: rgb(72, 25, 6); - --spectrum-cinnamon-1500: rgb(52, 18, 4); - --spectrum-cinnamon-1600: rgb(24, 8, 2); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-swatch-border-color: rgba(0, 0, 0, 0.51); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens/spectrum/component-bridge.css b/tools/styles/tokens/spectrum/component-bridge.css new file mode 100644 index 0000000000..9226569f4a --- /dev/null +++ b/tools/styles/tokens/spectrum/component-bridge.css @@ -0,0 +1,6919 @@ +:host, +:root { + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --system-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text + ); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --system-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 + ); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var( + --spectrum-body-size-s + ); + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 + ); + --system-accordion-size-l-item-content-font-size: var( + --spectrum-body-size-m + ); + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); + --system-accordion-size-xl-item-height: var( + --spectrum-component-height-400 + ); + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 + ); + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l + ); + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 + ); + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); + --system-accordion-compact-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 + ); + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var( + --spectrum-line-height-100 + ); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-action-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-action-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-action-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-action-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-hover: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var( + --spectrum-gray-50 + ); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-hover: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-down: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-action-button-static-black-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-static-black-selected-emphasized-content-color-hover: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-down: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-focus: var( + --spectrum-gray-900 + ); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-action-button-static-white-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) + ); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 + ); + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small + ); + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 + ); + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 + ); + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 + ); + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) + ); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 + ); + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --system-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var( + --spectrum-text-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-size-m-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var( + --spectrum-spacing-200 + ); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-background-color-quiet: var(--spectrum-background-base-color); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent + ); + --system-clear-button-over-background-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-background-color: transparent; + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var( + --spectrum-white + ); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var( + --spectrum-black + ); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-medium-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); + --system-color-area-border-radius: var( + --spectrum-color-area-border-rounding + ); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var( + --spectrum-color-control-track-width + ); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var( + --spectrum-color-handle-border-width + ); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var( + --spectrum-color-loupe-drop-shadow-y + ); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var( + --spectrum-field-label-to-component + ); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: ','; + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-l-min-height: var( + --spectrum-component-height-100 + ); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var( + --spectrum-component-height-200 + ); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var( + --spectrum-spacing-200 + ); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-up-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-up-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-up-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-up-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-up-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var( + --spectrum-asterisk-icon-size-75 + ); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var( + --spectrum-component-height-300 + ); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: transparent; + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var( + --spectrum-font-size-75 + ); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var( + --spectrum-workflow-icon-size-75 + ); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-menu-size-s-item-description-font-size: var( + --spectrum-font-size-50 + ); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-icon-width: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var( + --spectrum-font-size-300 + ); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-300 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); + --system-side-nav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 + ); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var( + --spectrum-slider-track-thickness + ); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var( + --spectrum-slider-handle-size-medium + ); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var( + --spectrum-slider-handle-size-small + ); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var( + --spectrum-spacing-100 + ); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var( + --spectrum-slider-handle-size-large + ); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var( + --spectrum-component-height-300 + ); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var( + --spectrum-red-visual-color + ); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-stepper-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-stepper-border-color-hover-invalid: var( + --spectrum-negative-border-color-hover + ); + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 + ); + --system-stepper-buttons-background-color-disabled: var( + --spectrum-gray-100 + ); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-900-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var( + --spectrum-component-height-100 + ); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var( + --spectrum-component-height-200 + ); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var( + --spectrum-text-to-visual-300 + ); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var( + --spectrum-tab-item-top-to-text-small + ); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var( + --spectrum-tab-item-top-to-text-large + ); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-75); + --system-tag-background-color-hover: var(--spectrum-gray-75); + --system-tag-background-color-active: var(--spectrum-gray-200); + --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --system-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --system-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius + ); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); + --system-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var( + --spectrum-heading-cjk-size-xxs + ); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxl + ); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css deleted file mode 100644 index f20b8189ad..0000000000 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ /dev/null @@ -1,92 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css deleted file mode 100644 index 95cf0a5a21..0000000000 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ /dev/null @@ -1,93 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b2b6c63ca3..b9cac20403 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -2,30 +2,23 @@ :root { --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; --spectrum-menu-item-checkmark-height-medium: 14px; --spectrum-menu-item-checkmark-height-large: 16px; --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; --spectrum-menu-item-checkmark-width-medium: 14px; --spectrum-menu-item-checkmark-width-large: 16px; --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -34,47 +27,39 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-200 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; --spectrum-coach-indicator-ring-diameter: 20px; --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; --spectrum-treeview-item-indentation-extra-large: 30px; --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; --spectrum-dialog-confirm-hero-height: 160px; --spectrum-dialog-confirm-border-radius: 5px; --spectrum-dialog-confirm-title-text-size: 19px; --spectrum-dialog-confirm-description-text-size: 15px; --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -84,10 +69,8 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -95,7 +78,6 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -103,9 +85,7 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css deleted file mode 100644 index 53b88bd9b6..0000000000 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ /dev/null @@ -1,92 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); -} diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 4da4c86aef..af2f9def43 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -2,30 +2,23 @@ :root { --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-top-to-text-medium: 7px; @@ -34,21 +27,17 @@ --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; @@ -59,7 +48,6 @@ --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; @@ -68,14 +56,12 @@ ); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-dash-line-height: 24px; @@ -85,10 +71,8 @@ --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -96,7 +80,6 @@ --spectrum-dial-controls-margin: 8px; --spectrum-dial-label-gap-y: 5px; --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); @@ -104,9 +87,7 @@ --spectrum-heading-size-xs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; } diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 228b94e430..41e39dc2bb 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -2,37 +2,33 @@ :root { --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-duration-0: 0s; + --spectrum-animation-duration-100: 0.13s; + --spectrum-animation-duration-200: 0.16s; + --spectrum-animation-duration-300: 0.19s; + --spectrum-animation-duration-400: 0.22s; + --spectrum-animation-duration-500: 0.25s; + --spectrum-animation-duration-600: 0.3s; + --spectrum-animation-duration-700: 0.35s; + --spectrum-animation-duration-800: 0.4s; + --spectrum-animation-duration-900: 0.45s; + --spectrum-animation-duration-1000: 0.5s; + --spectrum-animation-duration-2000: 1s; + --spectrum-animation-duration-4000: 2s; + --spectrum-animation-duration-6000: 3s; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css index e7f6691893..f20b8189ad 100644 --- a/tools/styles/tokens/spectrum/dark-vars.css +++ b/tools/styles/tokens/spectrum/dark-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.15 @@ -46,19 +45,14 @@ 0.07 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.07 @@ -67,21 +61,18 @@ var(--spectrum-blue-800-rgb), 0.15 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-900 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); @@ -89,7 +80,6 @@ --spectrum-blue-800 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-800-rgb), 0.25 diff --git a/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css index 22469fd947..95cf0a5a21 100644 --- a/tools/styles/tokens/spectrum/darkest-vars.css +++ b/tools/styles/tokens/spectrum/darkest-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.2 @@ -47,19 +46,14 @@ 0.08 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.08 @@ -68,21 +62,18 @@ var(--spectrum-blue-800-rgb), 0.2 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-900 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); @@ -90,7 +81,6 @@ --spectrum-blue-800 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-800-rgb), 0.3 diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 0f2af34c27..e43216bff0 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -59,37 +59,33 @@ ); --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-duration-0: 0s; + --spectrum-animation-duration-100: 0.13s; + --spectrum-animation-duration-200: 0.16s; + --spectrum-animation-duration-300: 0.19s; + --spectrum-animation-duration-400: 0.22s; + --spectrum-animation-duration-500: 0.25s; + --spectrum-animation-duration-600: 0.3s; + --spectrum-animation-duration-700: 0.35s; + --spectrum-animation-duration-800: 0.4s; + --spectrum-animation-duration-900: 0.45s; + --spectrum-animation-duration-1000: 0.5s; + --spectrum-animation-duration-2000: 1s; + --spectrum-animation-duration-4000: 2s; + --spectrum-animation-duration-6000: 3s; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); @@ -102,7243 +98,3 @@ var(--spectrum-docs-static-black-background-color-rgb) ); } - -:host, -:root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 - ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s - ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 - ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m - ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 - ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 - ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l - ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 - ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 - ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 - ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); -} - -:host, -:root { - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); -} - -:host, -:root { - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 - ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 - ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); -} - -:host, -:root { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); -} - -:host, -:root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); -} - -:host, -:root { - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); -} - -:host, -:root { - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); -} - -:host, -:root { - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); -} - -:host, -:root { - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); -} - -:host, -:root { - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-height: var(--spectrum-component-height-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); -} - -:host, -:root { - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); -} - -:host, -:root { - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); -} - -:host, -:root { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); -} - -:host, -:root { - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); -} - -:host, -:root { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white - ); - --system-clear-button-over-background-background-color: transparent; - --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-background-color: transparent; -} - -:host, -:root { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); -} - -:host, -:root { - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; -} - -:host, -:root { - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); -} - -:host, -:root { - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); -} - -:host, -:root { - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); -} - -:host, -:root { - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); -} - -:host, -:root { - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); -} - -:host, -:root { - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); -} - -:host, -:root { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); -} - -:host, -:root { - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); -} - -:host, -:root { - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); -} - -:host, -:root { - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); -} - -:host, -:root { - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); -} - -:host, -:root { - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; -} - -:host, -:root { - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); -} - -:host, -:root { - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); -} - -:host, -:root { - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); -} - -:host, -:root { - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); -} - -:host, -:root { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-200 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; -} - -:host, -:root { - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); -} - -:host, -:root { - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); -} - -:host, -:root { - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); -} - -:host, -:root { - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - -:host, -:root { - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); -} - -:host, -:root { - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); -} - -:host, -:root { - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); -} - -:host, -:root { - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); -} - -:host, -:root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); -} - -:host, -:root { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); -} - -:host, -:root { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); -} - -:host, -:root { - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); -} - -:host, -:root { - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; -} - -:host, -:root { - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); -} - -:host, -:root { - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); -} - -:host, -:root { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var( - --spectrum-gray-100 - ); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 - ); -} - -:host, -:root { - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); -} - -:host, -:root { - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); -} - -:host, -:root { - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; -} - -:host, -:root { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); -} - -:host, -:root { - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); -} - -:host, -:root { - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default - ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default - ); -} - -:host, -:root { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); -} - -:host, -:root { - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); -} - -:host, -:root { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); -} - -:host, -:root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); -} - -:host, -:root { - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} - -:host, -:root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); -} - -:host, -:root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); -} - -:host, -:root { - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); -} - -:host, -:root { - --system-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); - --system-heading-size-xxs-cjk-font-size: var( - --spectrum-heading-cjk-size-xxs - ); - --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); - --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - --system-heading-size-s-font-size: var(--spectrum-heading-size-s); - --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); - --system-heading-size-l-font-size: var(--spectrum-heading-size-l); - --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); - --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); - --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); - --system-heading-size-xxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxl - ); - --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); - --system-heading-size-xxxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxxl - ); - --system-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); - --system-body-size-xs-font-size: var(--spectrum-body-size-xs); - --system-body-size-s-font-size: var(--spectrum-body-size-s); - --system-body-size-l-font-size: var(--spectrum-body-size-l); - --system-body-size-xl-font-size: var(--spectrum-body-size-xl); - --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); - --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); - --system-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-detail-font-color: var(--spectrum-detail-color); - --system-detail-font-size: var(--spectrum-detail-size-m); - --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); - --system-detail-size-l-font-size: var(--spectrum-detail-size-l); - --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); - --system-code-font-family: var(--spectrum-code-font-family-stack); - --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); - --system-code-size-xs-font-size: var(--spectrum-code-size-xs); - --system-code-size-s-font-size: var(--spectrum-code-size-s); - --system-code-size-l-font-size: var(--spectrum-code-size-l); - --system-code-size-xl-font-size: var(--spectrum-code-size-xl); -} diff --git a/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css deleted file mode 100644 index 4f49738fc8..0000000000 --- a/tools/styles/tokens/spectrum/index.css +++ /dev/null @@ -1,803 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color-rgb: 255, 255, 255; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 255, 255, 255; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color-rgb: 255, 255, 255; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 255, 255, 255; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-border-width-100: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} - -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: var(--spectrum-black); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-swatch-border-color-rgb: 0, 0, 0; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 0, 0, 0; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens/spectrum/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index f63d46216e..6a1a3280a2 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -50,30 +50,23 @@ --spectrum-drop-shadow-blur: 6px; --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; --spectrum-menu-item-checkmark-height-medium: 14px; --spectrum-menu-item-checkmark-height-large: 16px; --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; --spectrum-menu-item-checkmark-width-medium: 14px; --spectrum-menu-item-checkmark-width-large: 16px; --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -82,47 +75,39 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-200 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; --spectrum-coach-indicator-ring-diameter: 20px; --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; --spectrum-treeview-item-indentation-extra-large: 30px; --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; --spectrum-dialog-confirm-hero-height: 160px; --spectrum-dialog-confirm-border-radius: 5px; --spectrum-dialog-confirm-title-text-size: 19px; --spectrum-dialog-confirm-description-text-size: 15px; --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -132,10 +117,8 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -143,7 +126,6 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -151,9 +133,7 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css index 423a2abd73..53b88bd9b6 100644 --- a/tools/styles/tokens/spectrum/light-vars.css +++ b/tools/styles/tokens/spectrum/light-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-900-rgb), 0.1 @@ -46,19 +45,14 @@ 0.06 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-800 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.06 @@ -67,21 +61,18 @@ var(--spectrum-blue-900-rgb), 0.1 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1100 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-1100 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); @@ -89,7 +80,6 @@ --spectrum-blue-900 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-900-rgb), 0.2 diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 2e813d2af1..f6cdc7a3d8 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -50,30 +50,23 @@ --spectrum-drop-shadow-blur: 4px; --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-top-to-text-medium: 7px; @@ -82,21 +75,17 @@ --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; @@ -107,7 +96,6 @@ --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; @@ -116,14 +104,12 @@ ); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-dash-line-height: 24px; @@ -133,10 +119,8 @@ --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -144,7 +128,6 @@ --spectrum-dial-controls-margin: 8px; --spectrum-dial-label-gap-y: 5px; --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); @@ -152,9 +135,7 @@ --spectrum-heading-size-xs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; } diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css index 5f408023e1..6b4dd50440 100644 --- a/tools/theme/src/express/theme-core-tokens.css +++ b/tools/theme/src/express/theme-core-tokens.css @@ -14,6 +14,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/express/theme-dark-core-tokens.css b/tools/theme/src/express/theme-dark-core-tokens.css index 4ef41eb3a1..3b699f4261 100644 --- a/tools/theme/src/express/theme-dark-core-tokens.css +++ b/tools/theme/src/express/theme-dark-core-tokens.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); :host, :root { diff --git a/tools/theme/src/express/theme-dark.css b/tools/theme/src/express/theme-dark.css index a45603126a..e8b821e0db 100644 --- a/tools/theme/src/express/theme-dark.css +++ b/tools/theme/src/express/theme-dark.css @@ -12,5 +12,5 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/express/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); diff --git a/tools/theme/src/express/theme-light-core-tokens.css b/tools/theme/src/express/theme-light-core-tokens.css index 2ad62ed5ee..6c06fedf5b 100644 --- a/tools/theme/src/express/theme-light-core-tokens.css +++ b/tools/theme/src/express/theme-light-core-tokens.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); :host, :root { diff --git a/tools/theme/src/express/theme-light.css b/tools/theme/src/express/theme-light.css index 37f6a33225..ae019f41d6 100644 --- a/tools/theme/src/express/theme-light.css +++ b/tools/theme/src/express/theme-light.css @@ -12,5 +12,5 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/express/theme-light.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); diff --git a/tools/theme/src/express/theme.css b/tools/theme/src/express/theme.css index cf80eaa576..371e879fb7 100644 --- a/tools/theme/src/express/theme.css +++ b/tools/theme/src/express/theme.css @@ -15,6 +15,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/spectrum-two/scale-large-core-tokens.css b/tools/theme/src/spectrum-two/scale-large-core-tokens.css index 174b11bc1b..3454840842 100755 --- a/tools/theme/src/spectrum-two/scale-large-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-large-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-large-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-large.css b/tools/theme/src/spectrum-two/scale-large.css index db452a8607..4b9a27607a 100644 --- a/tools/theme/src/spectrum-two/scale-large.css +++ b/tools/theme/src/spectrum-two/scale-large.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/scale-large.css'); @import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-large-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css index ca8e0afdef..a9b5350ee8 100755 --- a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-medium-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium.css b/tools/theme/src/spectrum-two/scale-medium.css index 00b5009889..649c6e9dc2 100644 --- a/tools/theme/src/spectrum-two/scale-medium.css +++ b/tools/theme/src/spectrum-two/scale-medium.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/scale-medium.css'); @import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-medium-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css index 11ef41c6cd..e02faac078 100755 --- a/tools/theme/src/spectrum-two/theme-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-core-tokens.css @@ -11,8 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css index 016fda8492..365faa704e 100755 --- a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-dark-vars.css'); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-dark.css b/tools/theme/src/spectrum-two/theme-dark.css index 5b2ec201ae..4bb15d70d3 100644 --- a/tools/theme/src/spectrum-two/theme-dark.css +++ b/tools/theme/src/spectrum-two/theme-dark.css @@ -12,4 +12,3 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-dark-vars.css'); diff --git a/tools/theme/src/spectrum-two/theme-light-core-tokens.css b/tools/theme/src/spectrum-two/theme-light-core-tokens.css index a20b808f30..f08bd2465d 100755 --- a/tools/theme/src/spectrum-two/theme-light-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-light-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-light-vars.css'); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-light.css b/tools/theme/src/spectrum-two/theme-light.css index 3b5ac13b90..74d2cca207 100644 --- a/tools/theme/src/spectrum-two/theme-light.css +++ b/tools/theme/src/spectrum-two/theme-light.css @@ -12,4 +12,3 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/theme-light.css'); @import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-light-vars.css'); diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css index 58d25efc0a..4d532b3af5 100755 --- a/tools/theme/src/spectrum-two/theme.css +++ b/tools/theme/src/spectrum-two/theme.css @@ -12,8 +12,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/core-global.css'); @import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/theme-core-tokens.css b/tools/theme/src/theme-core-tokens.css index 1c628ea1a4..9bba1433c6 100644 --- a/tools/theme/src/theme-core-tokens.css +++ b/tools/theme/src/theme-core-tokens.css @@ -13,6 +13,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/theme-dark-core-tokens.css b/tools/theme/src/theme-dark-core-tokens.css index 870dafc872..992cce5ae8 100644 --- a/tools/theme/src/theme-dark-core-tokens.css +++ b/tools/theme/src/theme-dark-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-dark.css b/tools/theme/src/theme-dark.css index 9194e4728e..b3a60dd71a 100644 --- a/tools/theme/src/theme-dark.css +++ b/tools/theme/src/theme-dark.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); diff --git a/tools/theme/src/theme-darkest-core-tokens.css b/tools/theme/src/theme-darkest-core-tokens.css index 36f72e30d3..e6b1a4e844 100644 --- a/tools/theme/src/theme-darkest-core-tokens.css +++ b/tools/theme/src/theme-darkest-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-darkest-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-darkest.css b/tools/theme/src/theme-darkest.css index 627777ecdb..70cc7dd60e 100644 --- a/tools/theme/src/theme-darkest.css +++ b/tools/theme/src/theme-darkest.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-darkest.css'); @import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-darkest-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); diff --git a/tools/theme/src/theme-light-core-tokens.css b/tools/theme/src/theme-light-core-tokens.css index 81924a5270..eab7c88dd0 100644 --- a/tools/theme/src/theme-light-core-tokens.css +++ b/tools/theme/src/theme-light-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-light.css b/tools/theme/src/theme-light.css index 528af49dc0..4f5dc7fc2f 100644 --- a/tools/theme/src/theme-light.css +++ b/tools/theme/src/theme-light.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-light.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); diff --git a/tools/theme/src/theme-lightest-core-tokens.css b/tools/theme/src/theme-lightest-core-tokens.css index 81924a5270..eab7c88dd0 100644 --- a/tools/theme/src/theme-lightest-core-tokens.css +++ b/tools/theme/src/theme-lightest-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-lightest.css b/tools/theme/src/theme-lightest.css index bd18d697b5..fadba254df 100644 --- a/tools/theme/src/theme-lightest.css +++ b/tools/theme/src/theme-lightest.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-lightest.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); diff --git a/tools/theme/src/theme.css b/tools/theme/src/theme.css index c58c4f8ae7..a1dc2aefdd 100644 --- a/tools/theme/src/theme.css +++ b/tools/theme/src/theme.css @@ -14,6 +14,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/yarn.lock b/yarn.lock index 5b794e8d26..2ed2d03f90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -452,6 +452,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d" integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ== +"@babel/helper-string-parser@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c" + integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA== + "@babel/helper-validator-identifier@^7.22.20", "@babel/helper-validator-identifier@^7.24.5": version "7.24.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz#918b1a7fa23056603506370089bd990d8720db62" @@ -462,6 +467,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== +"@babel/helper-validator-identifier@^7.25.9": + version "7.25.9" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7" + integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ== + "@babel/helper-validator-option@^7.23.5": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307" @@ -1428,15 +1438,6 @@ debug "^4.3.1" globals "^11.1.0" -"@babel/types@7.24.9": - version "7.24.9" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.9.tgz#228ce953d7b0d16646e755acf204f4cf3d08cc73" - integrity sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ== - dependencies: - "@babel/helper-string-parser" "^7.24.8" - "@babel/helper-validator-identifier" "^7.24.7" - to-fast-properties "^2.0.0" - "@babel/types@7.25.6": version "7.25.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6" @@ -1446,6 +1447,14 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" +"@babel/types@7.26.3": + version "7.26.3" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0" + integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA== + dependencies: + "@babel/helper-string-parser" "^7.25.9" + "@babel/helper-validator-identifier" "^7.25.9" + "@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.4.4": version "7.24.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.5.tgz#7661930afc638a5383eb0c4aee59b74f38db84d7" @@ -3210,7 +3219,7 @@ resolved "https://registry.yarnpkg.com/@lukeed/ms/-/ms-2.0.2.tgz#07f09e59a74c52f4d88c6db5c1054e819538e2a8" integrity sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA== -"@mapbox/node-pre-gyp@^1.0.5": +"@mapbox/node-pre-gyp@^1.0.11", "@mapbox/node-pre-gyp@^1.0.5": version "1.0.11" resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa" integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ== @@ -3337,22 +3346,22 @@ yargs "^17.6.0" "@netlify/build@^29.17.3": - version "29.51.4" - resolved "https://registry.yarnpkg.com/@netlify/build/-/build-29.51.4.tgz#d486b1ca6fe39481bb01d39efe2d77b28f72ecae" - integrity sha512-yuUyhRpzNjcvQe7j1GdK7n3T57eajHYx5SVi5rdml9BhpJzQkARyhA9N3R0bSsS3oq5c/0EgvxtRu5k6M4/lPg== + version "29.58.1" + resolved "https://registry.yarnpkg.com/@netlify/build/-/build-29.58.1.tgz#249b87e3050b79630cc890d09eb81929a2fde63b" + integrity sha512-z9xKi8saEypU1XVHmGYIubkmMlLp9BY273vUSxle36PTdfw3xWu1DLw7mqPc16mYNZjOmJElyETvF9B5YZ/eMA== dependencies: "@bugsnag/js" "^7.0.0" "@netlify/blobs" "^7.4.0" - "@netlify/cache-utils" "^5.1.5" - "@netlify/config" "^20.17.1" - "@netlify/edge-bundler" "12.2.2" - "@netlify/framework-info" "^9.8.13" - "@netlify/functions-utils" "^5.2.76" - "@netlify/git-utils" "^5.1.1" - "@netlify/opentelemetry-utils" "^1.2.1" + "@netlify/cache-utils" "^5.2.0" + "@netlify/config" "^20.21.1" + "@netlify/edge-bundler" "12.3.1" + "@netlify/framework-info" "^9.9.0" + "@netlify/functions-utils" "^5.3.1" + "@netlify/git-utils" "^5.2.0" + "@netlify/opentelemetry-utils" "^1.3.0" "@netlify/plugins-list" "^6.80.0" - "@netlify/run-utils" "^5.1.1" - "@netlify/zip-it-and-ship-it" "9.37.8" + "@netlify/run-utils" "^5.2.0" + "@netlify/zip-it-and-ship-it" "9.42.1" "@sindresorhus/slugify" "^2.0.0" ansi-escapes "^6.0.0" chalk "^5.0.0" @@ -3362,7 +3371,7 @@ figures "^5.0.0" filter-obj "^5.0.0" got "^12.0.0" - hot-shots "10.0.0" + hot-shots "10.2.1" indent-string "^5.0.0" is-plain-obj "^4.0.0" js-yaml "^4.0.0" @@ -3400,10 +3409,10 @@ uuid "^9.0.0" yargs "^17.6.0" -"@netlify/cache-utils@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.1.5.tgz#848c59003e576fa0b2f9c6ca270eff27af938b25" - integrity sha512-lMNdFmy2Yu3oVquSPooRDLxJ8QOsIX6X6vzA2pKz/9V2LQFJiqBukggXM+Rnqzk1regPpdJ0jK3dPGvOKaRQgg== +"@netlify/cache-utils@^5.1.6": + version "5.1.6" + resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.1.6.tgz#8a9e6126c1e6e984323c5e1478063edcc9069570" + integrity sha512-0K1+5umxENy9H3CC+v5qGQbeTmKv/PBAhOxPKK6GPykOVa7OxT26KGMU7Jozo6pVNeLPJUvCCMw48ycwtQ1fvw== dependencies: cpy "^9.0.0" get-stream "^6.0.0" @@ -3414,10 +3423,10 @@ path-exists "^5.0.0" readdirp "^3.4.0" -"@netlify/cache-utils@^5.1.6": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.1.6.tgz#8a9e6126c1e6e984323c5e1478063edcc9069570" - integrity sha512-0K1+5umxENy9H3CC+v5qGQbeTmKv/PBAhOxPKK6GPykOVa7OxT26KGMU7Jozo6pVNeLPJUvCCMw48ycwtQ1fvw== +"@netlify/cache-utils@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.2.0.tgz#dd6ea4702c3e5bfccca2a3980ab04be2ffb8e838" + integrity sha512-kKzGQ9gKNRUjqFMC1/1goeTe1WfzL6KhphwXac7tialowg10Dtmr2X+eDzfH9enGvD6vhYR4a0QMTQWkjfPVmg== dependencies: cpy "^9.0.0" get-stream "^6.0.0" @@ -3458,12 +3467,14 @@ validate-npm-package-name "^4.0.0" yargs "^17.6.0" -"@netlify/config@^20.17.1": - version "20.17.1" - resolved "https://registry.yarnpkg.com/@netlify/config/-/config-20.17.1.tgz#d229812f77f837308ccade36ca93621d46ac119e" - integrity sha512-uZuEYooSWVnyx54AdLwPd7mgHy/PrWjHvPy5AO0ApPYsokNVceuk7NX6xqkD0CuGwcc5K9oRQx91XDWQoWd2zQ== +"@netlify/config@^20.21.1": + version "20.21.1" + resolved "https://registry.yarnpkg.com/@netlify/config/-/config-20.21.1.tgz#ba7b9af74ff07de3ad691f632b07604a07024024" + integrity sha512-fdSkuyuVZNyMAcocTT0M1rXce0ccj8Z1a8xRKvBV8BxqQg3Ds+Zcx9ioHUtjc75xk+CLHl+nYZDoKv9zUHO2ZQ== dependencies: "@iarna/toml" "^2.2.5" + "@netlify/headers-parser" "^7.3.0" + "@netlify/redirect-parser" "^14.5.0" chalk "^5.0.0" cron-parser "^4.1.0" deepmerge "^4.2.2" @@ -3477,9 +3488,7 @@ is-plain-obj "^4.0.0" js-yaml "^4.0.0" map-obj "^5.0.0" - netlify "^13.1.20" - netlify-headers-parser "^7.1.4" - netlify-redirect-parser "^14.3.0" + netlify "^13.2.0" node-fetch "^3.3.1" omit.js "^2.0.2" p-locate "^6.0.0" @@ -3488,10 +3497,10 @@ validate-npm-package-name "^4.0.0" yargs "^17.6.0" -"@netlify/edge-bundler@12.2.2": - version "12.2.2" - resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.2.2.tgz#0c74a458b883a7d537b34a65bcf403912125f4b3" - integrity sha512-esaM7H/lViceghUR84ZTuNk3VkeVNy2BaCeV+/nWHFOXbEpMmlNML31hJswk79QRztV2XO1oLWu8PxtmURd7DA== +"@netlify/edge-bundler@12.2.3": + version "12.2.3" + resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.2.3.tgz#a89ff2467fa134419e30511993c637c04064eb4a" + integrity sha512-o/Od4gvGT2qPSjJ1TSh8KYDJHfzxW4iemA5DiZtXIDgaIvWgvehZKDROp9wJ2FseP2F83y4ZDmt5xFfBSD9IYQ== dependencies: "@import-maps/resolve" "^1.0.1" "@vercel/nft" "^0.27.0" @@ -3517,13 +3526,13 @@ urlpattern-polyfill "8.0.2" uuid "^9.0.0" -"@netlify/edge-bundler@12.2.3": - version "12.2.3" - resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.2.3.tgz#a89ff2467fa134419e30511993c637c04064eb4a" - integrity sha512-o/Od4gvGT2qPSjJ1TSh8KYDJHfzxW4iemA5DiZtXIDgaIvWgvehZKDROp9wJ2FseP2F83y4ZDmt5xFfBSD9IYQ== +"@netlify/edge-bundler@12.3.1": + version "12.3.1" + resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.3.1.tgz#f5f2838b7ae67879c95ff7f8a0c61d0670e93971" + integrity sha512-Kmg7+OD/5PWyWUNDR7G6DyyL/+kliN8JcSe2vaZ6zmPWdK/+ejeCA+d/9ROOEMsAvX7heuwe74SA301Mp9ESaw== dependencies: "@import-maps/resolve" "^1.0.1" - "@vercel/nft" "^0.27.0" + "@vercel/nft" "0.27.7" ajv "^8.11.2" ajv-errors "^3.0.0" better-ajv-errors "^1.2.0" @@ -3567,14 +3576,21 @@ read-pkg-up "^9.1.0" semver "^7.3.8" -"@netlify/functions-utils@^5.2.76": - version "5.2.76" - resolved "https://registry.yarnpkg.com/@netlify/functions-utils/-/functions-utils-5.2.76.tgz#b049c2ff34b194b43eacdd9529175e7608cb527b" - integrity sha512-ASxD+oZ5kNE1ZQYrM5kL0YgIiDQ7e2UyTUvSB+oh8vP/FHBoiDlt5CWpMfjDcto1aMpONrvTC3G7kfSKyBAmhw== +"@netlify/framework-info@^9.9.0": + version "9.9.0" + resolved "https://registry.yarnpkg.com/@netlify/framework-info/-/framework-info-9.9.0.tgz#35512061d48919598ecb8ec6666bb5150e202f68" + integrity sha512-ucPBnBJVJUjsoCAhFy76zjQgg2hLPaR1jTOjH5W/jglc5DIZ9HJSgHfTp4e9A3ok8GXvQyTrYKE5kTZpwLoYQQ== dependencies: - "@netlify/zip-it-and-ship-it" "9.37.8" - cpy "^9.0.0" - path-exists "^5.0.0" + ajv "^8.12.0" + filter-obj "^5.0.0" + find-up "^6.3.0" + is-plain-obj "^4.0.0" + locate-path "^7.0.0" + p-filter "^3.0.0" + p-locate "^6.0.0" + process "^0.11.10" + read-package-up "^11.0.0" + semver "^7.3.8" "@netlify/functions-utils@^5.2.93": version "5.2.93" @@ -3585,6 +3601,15 @@ cpy "^9.0.0" path-exists "^5.0.0" +"@netlify/functions-utils@^5.3.1": + version "5.3.1" + resolved "https://registry.yarnpkg.com/@netlify/functions-utils/-/functions-utils-5.3.1.tgz#f8c5269512c99d67b615ed9ac217a3c9ba7f6003" + integrity sha512-Bm1Uro1Uql21/PUKcpGcBv88e5qd3fRHSmO9FM/uE1HxtsuujXer1pRTE/+qZRnPXpeLLtWwda7a3zIfADOEaw== + dependencies: + "@netlify/zip-it-and-ship-it" "9.42.1" + cpy "^9.0.0" + path-exists "^5.0.0" + "@netlify/git-utils@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@netlify/git-utils/-/git-utils-5.1.1.tgz#36d5a6433a070035099b47d9151638053752cd7b" @@ -3596,6 +3621,29 @@ moize "^6.1.3" path-exists "^5.0.0" +"@netlify/git-utils@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@netlify/git-utils/-/git-utils-5.2.0.tgz#6e61e8b3a11274c64125cf074b304156970c1c6f" + integrity sha512-maNQyhQ6zTS5Kwl03HXoUa7uTNjmCvZea5Jko2pyDWz0xW1cunnil+4s33wXrMZJNDvyv97O2vkC5N1sAS3fyQ== + dependencies: + execa "^6.0.0" + map-obj "^5.0.0" + micromatch "^4.0.2" + moize "^6.1.3" + path-exists "^5.0.0" + +"@netlify/headers-parser@^7.3.0": + version "7.3.0" + resolved "https://registry.yarnpkg.com/@netlify/headers-parser/-/headers-parser-7.3.0.tgz#9de796a11c9e18c4800f81f09a2da8a3b299a538" + integrity sha512-4RTR9X3bylRV+q1/OHSwXcXylYKr5+3mkKcL/QLBI+bTqvSO82vjWAQAqQfvWVSCaF6HrYORid3zLGzJ94YOSw== + dependencies: + "@iarna/toml" "^2.2.5" + escape-string-regexp "^5.0.0" + fast-safe-stringify "^2.0.7" + is-plain-obj "^4.0.0" + map-obj "^5.0.0" + path-exists "^5.0.0" + "@netlify/local-functions-proxy-darwin-arm64@1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@netlify/local-functions-proxy-darwin-arm64/-/local-functions-proxy-darwin-arm64-1.1.1.tgz#c83a0a142637fb8cefe25c95f5c5cf6f2d7e32ed" @@ -3679,26 +3727,42 @@ resolved "https://registry.yarnpkg.com/@netlify/node-cookies/-/node-cookies-0.1.0.tgz#dda912ba618527695cf519fafa221c5e6777c612" integrity sha512-OAs1xG+FfLX0LoRASpqzVntVV/RpYkgpI0VrUnw2u0Q1qiZUzcPffxRK8HF3gc4GjuhG5ahOEMJ9bswBiZPq0g== -"@netlify/open-api@^2.33.1": - version "2.33.1" - resolved "https://registry.yarnpkg.com/@netlify/open-api/-/open-api-2.33.1.tgz#cf45e87da00d0c02a20731c05cb5a7fd6e34dc0f" - integrity sha512-EP5nVae2sRSg8orieT/PvmykIUkPWr/Qzk2vj1QIUAPeMbR8JM3Aq+W/4fK9m0Yq+1CZ3sWeNy/r6nsxLqnXVg== - "@netlify/open-api@^2.34.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@netlify/open-api/-/open-api-2.34.0.tgz#409e8d2d2e1755e0a01b38f3f0c48fe597999758" integrity sha512-C4v7Od/vnGgZ1P4JK3Fn9uUi9HkTxeUqUtj4OLnGD+rGyaVrl4JY89xMCoVksijDtO8XylYFU59CSTnQNeNw7g== +"@netlify/open-api@^2.35.0": + version "2.35.0" + resolved "https://registry.yarnpkg.com/@netlify/open-api/-/open-api-2.35.0.tgz#f25fcb32c4810be4b7d87261ce20b5c88d28913e" + integrity sha512-c6LpV29CKMgq6/eViItE6L2ova9UldBO9tHRvvwpJfSBgCwWaFhmiepe07E3xIW4GfTCGoWE816mNzXB/2ceZg== + "@netlify/opentelemetry-utils@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@netlify/opentelemetry-utils/-/opentelemetry-utils-1.2.1.tgz#03862fd2073ee01de75335666c729d910bff0abe" integrity sha512-A6nQBvUn/avHQopLOOjX8rY2eua//jufbx4NZZODACEHtfXAEmOjCoDe2m+cQPRq+jNa98nvCy/sJh2RwuCQog== +"@netlify/opentelemetry-utils@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@netlify/opentelemetry-utils/-/opentelemetry-utils-1.3.0.tgz#b1b48b45b9489e929071bcafe1cabc837df3f6f4" + integrity sha512-2LpNZpowo7Q4nSNmPYcx4gAAXIhRiSanX7Bux7b0D7ohdaC8NOgmFc7vdVzIsCChLwqbQ4HZpN1fd0W40Cm7bg== + "@netlify/plugins-list@^6.80.0": version "6.80.0" resolved "https://registry.yarnpkg.com/@netlify/plugins-list/-/plugins-list-6.80.0.tgz#da45e4f67e41e1623cd002273f8e6b2aea68ba8a" integrity sha512-bCKLI51UZ70ziIWsf2nvgPd4XuG6m8AMCoHiYtl/BSsiaSBfmryZnTTqdRXerH09tBRpbPPwzaEgUJwyU9o8Qw== +"@netlify/redirect-parser@^14.5.0": + version "14.5.0" + resolved "https://registry.yarnpkg.com/@netlify/redirect-parser/-/redirect-parser-14.5.0.tgz#fcf5cb4d944dffecb6476898b24f29daf46b2579" + integrity sha512-0HxtPj+azmoaQhuZAbyTn6WyMl+PO6XrFU6TRo/0b57jtVz9uTjrvFytjmTqTvVEY1sLePCxbTbgEULm2XDTjQ== + dependencies: + "@iarna/toml" "^2.2.5" + fast-safe-stringify "^2.1.1" + filter-obj "^5.0.0" + is-plain-obj "^4.0.0" + path-exists "^5.0.0" + "@netlify/run-utils@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@netlify/run-utils/-/run-utils-5.1.1.tgz#be1938aaca58f9032054cddea02e2673ffa9c4ee" @@ -3706,15 +3770,14 @@ dependencies: execa "^6.0.0" -"@netlify/serverless-functions-api@^1.21.0": - version "1.22.0" - resolved "https://registry.yarnpkg.com/@netlify/serverless-functions-api/-/serverless-functions-api-1.22.0.tgz#b60e76b512519ff407c5716b2fe3c7fd4e48f707" - integrity sha512-vv8fWCOIadSvdmR+8UYopdyHO/gOysl+8IBOxUUB0B3y7nnLOiBniE1JBeBR3y7gI/q/cnibBF2RhR3W04Wo/A== +"@netlify/run-utils@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@netlify/run-utils/-/run-utils-5.2.0.tgz#2b1a519fe67b3eaeb41c2e758386c84d4d0e1851" + integrity sha512-bsrv7Sjge5g71VMgZ65Ioc5q4lHXdLQCmpUU6sY06Aeol1psi1iDOGVMx/7ExJjbCtQgxye35wZjAz60i6X22Q== dependencies: - "@netlify/node-cookies" "^0.1.0" - urlpattern-polyfill "8.0.2" + execa "^6.0.0" -"@netlify/serverless-functions-api@^1.31.0": +"@netlify/serverless-functions-api@^1.31.0", "@netlify/serverless-functions-api@^1.31.1": version "1.31.1" resolved "https://registry.yarnpkg.com/@netlify/serverless-functions-api/-/serverless-functions-api-1.31.1.tgz#4f7f964c46497111e3b4b058f0f33e4c0bba3c05" integrity sha512-SkNxzfCwctS5ETnCqJOJfZZ/jB0pTkbWEAsApHoL7HzUQGWoRM6wYf4baJAJVMTfZBQu534SbKuwRs7WDAs43A== @@ -3722,15 +3785,15 @@ "@netlify/node-cookies" "^0.1.0" urlpattern-polyfill "8.0.2" -"@netlify/zip-it-and-ship-it@9.37.8": - version "9.37.8" - resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.37.8.tgz#a825c2fda415eb4eae59353fb37202fe21275cc3" - integrity sha512-hE/aRvRVndlaInzS//b5d5mD45cOUOvNf5u5pyTJDEbG9h/qpippILGMi33I8juJEEwYfgQjqjG8TBPpJGLNIw== +"@netlify/zip-it-and-ship-it@9.41.1": + version "9.41.1" + resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.41.1.tgz#c7bb95a56fe292639ecf8c0376264c9b9776e582" + integrity sha512-EzXw1+4OJ4mCZUOqVPDQZNM8jf/563utFo1Ph6dYtSR21E1oYlgt6Oib1pyG/bFGufvdtrxw845/1MTCPvXzJA== dependencies: "@babel/parser" "^7.22.5" - "@babel/types" "7.24.9" + "@babel/types" "7.25.6" "@netlify/binary-info" "^1.0.0" - "@netlify/serverless-functions-api" "^1.21.0" + "@netlify/serverless-functions-api" "^1.31.0" "@vercel/nft" "^0.27.1" archiver "^7.0.0" common-path-prefix "^3.0.0" @@ -3762,16 +3825,16 @@ yargs "^17.0.0" zod "^3.23.8" -"@netlify/zip-it-and-ship-it@9.41.1": - version "9.41.1" - resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.41.1.tgz#c7bb95a56fe292639ecf8c0376264c9b9776e582" - integrity sha512-EzXw1+4OJ4mCZUOqVPDQZNM8jf/563utFo1Ph6dYtSR21E1oYlgt6Oib1pyG/bFGufvdtrxw845/1MTCPvXzJA== +"@netlify/zip-it-and-ship-it@9.42.1": + version "9.42.1" + resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.42.1.tgz#e902c0325efbc78b9d12b73289d57b7120f4eb40" + integrity sha512-ZCGM2OnLbiFOZO+kpODI6BKjH6X4a6vE/tJd0aqIvKWiygZgxhIw5APZUzgwLGv4BahIBG+tcfKgW7krpZYLwA== dependencies: "@babel/parser" "^7.22.5" - "@babel/types" "7.25.6" + "@babel/types" "7.26.3" "@netlify/binary-info" "^1.0.0" - "@netlify/serverless-functions-api" "^1.31.0" - "@vercel/nft" "^0.27.1" + "@netlify/serverless-functions-api" "^1.31.1" + "@vercel/nft" "0.27.7" archiver "^7.0.0" common-path-prefix "^3.0.0" cp-file "^10.0.0" @@ -4994,6 +5057,15 @@ estree-walker "^2.0.2" picomatch "^2.3.1" +"@rollup/pluginutils@^5.1.3": + version "5.1.4" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz#bb94f1f9eaaac944da237767cdfee6c5b2262d4a" + integrity sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ== + dependencies: + "@types/estree" "^1.0.0" + estree-walker "^2.0.2" + picomatch "^4.0.2" + "@rollup/rollup-android-arm-eabi@4.17.2": version "4.17.2" resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz#1a32112822660ee104c5dd3a7c595e26100d4c2d" @@ -5226,152 +5298,152 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918" integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ== -"@spectrum-css/accordion@^6.0.0-s2-foundations.16": +"@spectrum-css/accordion@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-6.0.0-s2-foundations.16.tgz#cb4ed7f8467681c1f4366f9a2e02706dd5fc71e1" integrity sha512-A3FnYMHXNJDYWWwQCTJwQblGUdpqdY4eDru8cq/Lf6SePhVaPtGeMyrESlyOYXTAdfmTJvvs0Ze6sKEXaY8jrw== -"@spectrum-css/actionbar@^9.0.0-s2-foundations.16": +"@spectrum-css/actionbar@9.0.0-s2-foundations.16": version "9.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-9.0.0-s2-foundations.16.tgz#ee47b51174de82902f213bbcb184b15bf60e7d7e" integrity sha512-zPZHtQ0ydhrgif5hnK6RnuD/DCr68MWs6ek4b/GaRnYATUNVtP0+jGM9FiyDxBha1u1PEZxAKmT7uOKyETuZ8w== -"@spectrum-css/actionbutton@^7.0.0-s2-foundations.22": +"@spectrum-css/actionbutton@7.0.0-s2-foundations.22": version "7.0.0-s2-foundations.22" resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-7.0.0-s2-foundations.22.tgz#30ad63f7f323215f1ba9899a3d74abb1467e35fb" integrity sha512-voPc0KdIB8aF3LmBiBg8yiR5NbffWbChtIS9V4hCicoD/pc202dFVaWOQGYp4DsDNLV2XzxA+brtPCYvNxfh4w== -"@spectrum-css/actiongroup@^6.0.0-s2-foundations.15": +"@spectrum-css/actiongroup@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-6.0.0-s2-foundations.15.tgz#5ceca8b0d203ac8dbac6b58b67b1bc8822f3a2db" integrity sha512-Bx8NJIm1OTVlHlPlrfOvxas2f5DHP/OeInxrcCwybZtQ2QgKsoWgVJQ2KME56qVNcGZEC9XRVWSdR5gGUWM1RA== -"@spectrum-css/actionmenu@^7.0.0-s2-foundations.15": +"@spectrum-css/actionmenu@7.0.0-s2-foundations.15": version "7.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-7.0.0-s2-foundations.15.tgz#ad44e24f3ca79097ee65f2d985608c323e523f11" integrity sha512-WrTXmQDhQ7JU4if7GKtwwGJnF30wacVjbWhmTvj6/Dh7NT/N3Ztw3cN1isLW1Ojki6e7A+wzEm4yqMw7tbt8tg== -"@spectrum-css/alertbanner@^3.0.0-s2-foundations.16": +"@spectrum-css/alertbanner@3.0.0-s2-foundations.16": version "3.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/alertbanner/-/alertbanner-3.0.0-s2-foundations.16.tgz#d592bdac16e1cfa4cc565a81d926f5b61f853118" integrity sha512-vNDMTHtWSKbaiz3BAEnuQWr/oIif/HzfUiHOYdOw7I5TjwKSMBnR/i5ah+6j8JmYxEbp/Yc/KpmhA7CEjmSlvw== -"@spectrum-css/alertdialog@^3.0.0-s2-foundations.15": +"@spectrum-css/alertdialog@3.0.0-s2-foundations.15": version "3.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/alertdialog/-/alertdialog-3.0.0-s2-foundations.15.tgz#569a184567100f8583028ef59ad0f6e958535c39" integrity sha512-xTRWk8yohIBwqQHO1DaG8bxZFdVPI7hwZtzNHZyC17OI0ShcatpozLQNJ3DujwFhT7QUt/vDP9awt0/Z0WeBmA== -"@spectrum-css/asset@^6.0.0-s2-foundations.15": +"@spectrum-css/asset@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-6.0.0-s2-foundations.15.tgz#ce9cfa096c57a66d563c6afe087d91777bf6ebaa" integrity sha512-/XgrjMeFxC0EW8UM+BoRnv5vouDDtn6jtB2T5AZGWHZB6T6xgR0JAGBbW4KVZAV2CPcHLpvv3nZJrC3FwuWQ9A== -"@spectrum-css/avatar@^8.0.0-s2-foundations.15": +"@spectrum-css/avatar@8.0.0-s2-foundations.15": version "8.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-8.0.0-s2-foundations.15.tgz#b9afbbdd703e687d940d9862021a879bb3afbf0f" integrity sha512-ys1Fm+DO9CLDabK6pIhdqBY5CklYrY8cfPGGburj0gwveqDGo5sP3UlufnaOts2zCWAfpsG/vwzGPTGc+JI7Rg== -"@spectrum-css/badge@^5.0.0-s2-foundations.15": +"@spectrum-css/badge@5.0.0-s2-foundations.15": version "5.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-5.0.0-s2-foundations.15.tgz#7cdd95382583a5637396b1af8d4ef9c04e807b77" integrity sha512-WNI7vQuJ3cQtl0JDALVN1ohkgc+/na/nD3YDPck9FjMIKvKRbkgc6Ear8YP1B6Xp6PY9AOuxdUjA6yK/d5gvrw== -"@spectrum-css/breadcrumb@^10.0.0-s2-foundations.15": +"@spectrum-css/breadcrumb@10.0.0-s2-foundations.15": version "10.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-10.0.0-s2-foundations.15.tgz#e2ab8a5248e5f7be2b1cdd45d1843170f7ed1e8d" integrity sha512-yVKmdBf49bNPDBzfphu7/J2BViDEwvTCmKTz8Lzo2DrSonzyRc/ZwO58thr5+27sC77RKtrt+SFRdzzOFc1HOg== -"@spectrum-css/button@^14.0.0-s2-foundations.18": +"@spectrum-css/button@14.0.0-s2-foundations.18": version "14.0.0-s2-foundations.18" resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-14.0.0-s2-foundations.18.tgz#3d51bab068cb70d8ef64eda2fd1f4b765a0c4022" integrity sha512-u5LRGanBVT1neilx19Ij06NsleXu76Yrna721vC0knw/unUhbnZzPD0H2YUrVardgpK24V8g4cr3TOb8WgabWQ== -"@spectrum-css/buttongroup@^8.0.0-s2-foundations.15": +"@spectrum-css/buttongroup@8.0.0-s2-foundations.15": version "8.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-8.0.0-s2-foundations.15.tgz#a66a8dc0b2205622abc1d6f1bd43ecc53f826101" integrity sha512-RRI7ACnsNz7EWoWDsZ62TpsFmHST6ciwJ0pB7PvDfs86YTxpYcTEU5KPpJdRE4dOXuwhG5BjWMAdwDNc23JbXQ== -"@spectrum-css/card@^10.0.0-s2-foundations.20": +"@spectrum-css/card@10.0.0-s2-foundations.20": version "10.0.0-s2-foundations.20" resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-10.0.0-s2-foundations.20.tgz#f9b3a4133ade6e1fb56fcf0737fcd394a4866269" integrity sha512-a4S9+UiRks25dKGWTxfFGgthGQsDtPN8n3W2Ph01vjurNUucgznCeFwkMWA9EltxYR1EIadWzcUNF9vvmmO4YQ== -"@spectrum-css/checkbox@^10.0.0-s2-foundations.18": +"@spectrum-css/checkbox@10.0.0-s2-foundations.18": version "10.0.0-s2-foundations.18" resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-10.0.0-s2-foundations.18.tgz#85b0163fb04a252e57e3cbce73e5158f7f4b63cd" integrity sha512-waxb4pLSfT7HS6Bz/fsLHHNEqfmJZUZU6r1aw1fZIoKpVrFfMnkVn/eH7qMyMZ8oM3wpecd5XxV+4dP6YWU0PA== -"@spectrum-css/clearbutton@^7.0.0-s2-foundations.16": +"@spectrum-css/clearbutton@7.0.0-s2-foundations.16": version "7.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-7.0.0-s2-foundations.16.tgz#5039908a6db86b465539eb4e38025da7f8c46270" integrity sha512-7m6+xzFTWWe01qPMhgNQWnQPXYthYsN5Y3uB7J9C2qC34e2XVg04DZtgLlsY3n3bLk3FIWDZegvZQ6fm92m9/Q== -"@spectrum-css/closebutton@^6.0.0-s2-foundations.16": +"@spectrum-css/closebutton@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/closebutton/-/closebutton-6.0.0-s2-foundations.16.tgz#4383c004f078a0c53a0e16b8b2ac30802dc88ef0" integrity sha512-XjXMLsZlJkaS3BY4q+PqyH7g+l5dKcVTZ0Ek7qG4llLpSa2+/Sc3INoJZSYojqvv38xpRDETiFq50CjJ+OwX1w== -"@spectrum-css/coachindicator@^3.0.0-s2-foundations.16": +"@spectrum-css/coachindicator@3.0.0-s2-foundations.16": version "3.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/coachindicator/-/coachindicator-3.0.0-s2-foundations.16.tgz#e80fd05d8a501e423bc5e8935fbaff556e87645c" integrity sha512-pRGSyVY8/na1PwRubbVAv6dyn3KbbpUlRPFo3VYHrQU8IDdS3C6iTKbIa/xQDObk0Y3UZ+be5nf2BP3EjLfOzA== -"@spectrum-css/coachmark@^8.0.0-s2-foundations.17": +"@spectrum-css/coachmark@8.0.0-s2-foundations.17": version "8.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-8.0.0-s2-foundations.17.tgz#0534adcd714de66509ca4958d1d49ad34c9654e4" integrity sha512-xWNVCd/Wf/vCZF3HIBH1vIIJfsbAYCoiU7bOGjBDFRexU+HsY9cc69vELBYHWIkGIf5wbZHtblBfdfHmnZChpw== -"@spectrum-css/colorarea@^6.0.0-s2-foundations.15": +"@spectrum-css/colorarea@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-6.0.0-s2-foundations.15.tgz#00151a9823d53614f1f52d9b0724f536761ae4e4" integrity sha512-o3gd/r3gyRVdUwFMMpJRyBo6oCgfc7YKUeK9t8EEdRqeBKEbUp2D2fiqrF1neu6DLaldVx01vvuJUlME3Wa3DA== -"@spectrum-css/colorhandle@^9.0.0-s2-foundations.16": +"@spectrum-css/colorhandle@9.0.0-s2-foundations.16": version "9.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-9.0.0-s2-foundations.16.tgz#d917ce185ee576f89f53bf4f9c768f5c2816c262" integrity sha512-sDNsqiWJ0JiT5p3iantQUEeOy4s65FdSTUuhrNovTfbwek8nSWDD9pUU8SrCVIBxaV74evTO3f1hpGIRYRt35g== -"@spectrum-css/colorloupe@^6.0.0-s2-foundations.15": +"@spectrum-css/colorloupe@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-6.0.0-s2-foundations.15.tgz#bc72cadec1bc49caae995097f389122cb4c75a4e" integrity sha512-IM70gqXwpZLvEfgkYEPfsiPpkM9HRT0wCvO6T/SXtDPQVhAla4AAXR82yt7LhnWsbx7JLMpW8vOmYTf3XyNhqw== -"@spectrum-css/colorslider@^7.0.0-s2-foundations.16": +"@spectrum-css/colorslider@7.0.0-s2-foundations.16": version "7.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-7.0.0-s2-foundations.16.tgz#e3a7220f98176ccdc724464c70de5e0fe44b25fb" integrity sha512-TWU2sn0mkFR/WutPd9F6bA20r0eleUVL1NKBINbPJLjUB89fwhzrgxygWXU+gdAAGuUskQjouK8OnmQsNbg5gw== -"@spectrum-css/colorwheel@^5.0.0-s2-foundations.15": +"@spectrum-css/colorwheel@5.0.0-s2-foundations.15": version "5.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-5.0.0-s2-foundations.15.tgz#a0f84f82521f40a0feda1862899a8e79ed88c3ac" integrity sha512-BsWAoSUjHakRhek9Y+JshTPILVw2YCE5INMG+EhJ/cK6WCAAY5TQg5W5sBobwzFXXz0jk519wVFNVwEC93lrNg== -"@spectrum-css/combobox@^4.0.0-s2-foundations.18": +"@spectrum-css/combobox@4.0.0-s2-foundations.18": version "4.0.0-s2-foundations.18" resolved "https://registry.yarnpkg.com/@spectrum-css/combobox/-/combobox-4.0.0-s2-foundations.18.tgz#746f54ec45b95b9ffdbc969b9de8ee393e62963e" integrity sha512-Q5eIl6JgZrEr5pwiWoo/ZcBMFIaBQNnrFJQI1/7OhOYVFfqOQWyOoSXNpX1NxJrYUI+mcQPyxJ5ad6DvCH53Eg== -"@spectrum-css/commons@^11.0.0-s2-foundations.15": +"@spectrum-css/commons@11.0.0-s2-foundations.15": version "11.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-11.0.0-s2-foundations.15.tgz#d04770d461c9642c9a4739d208a2f85e247e0288" integrity sha512-aolxdmXn5VSUBN+Obb5WG/cQ0PQjlsxEyyFKPm3pZ+QKY7Q764rnDbxSHO+60I0hfQ23u0yjDJdWlmCsVoZm5g== -"@spectrum-css/contextualhelp@^4.0.0-s2-foundations.16": +"@spectrum-css/contextualhelp@4.0.0-s2-foundations.16": version "4.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/contextualhelp/-/contextualhelp-4.0.0-s2-foundations.16.tgz#340295fea294d63d1fa09ce23fc38cc3c3a0af8a" integrity sha512-vzOyFyzlrvrlROwVV/1BryueGNjbWRzGi4qf6vCugrX0vqTqnARPP/X6cGz96F03mHJVbADhno4KFHZVjqSU+w== -"@spectrum-css/dialog@^11.0.0-s2-foundations.15": +"@spectrum-css/dialog@11.0.0-s2-foundations.15": version "11.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-11.0.0-s2-foundations.15.tgz#36af80db597f86e1e0b30b21b535cd755b33585b" integrity sha512-+FPnZJOF6+2YFrV5GoYS3YU6zmqO2mj+x3FiPfmEEbt9sRvWYuZ8GLfhMr2vp0GBMUNl65kpnKtnhx8RNI3b5A== -"@spectrum-css/divider@^4.0.0-s2-foundations.15": +"@spectrum-css/divider@4.0.0-s2-foundations.15": version "4.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-4.0.0-s2-foundations.15.tgz#ae84e591a6a9fc6dff793f8462fab5a0018dc0e7" integrity sha512-XKXgPSzF4HkNjN2D0UjStRFj+BNIt6BOtoxgyNZEV/sNHM1E4Oe6XVPyc8cifXJYj08pvu5B2WH0x+N04gj6cg== -"@spectrum-css/dropzone@^7.0.0-s2-foundations.16": +"@spectrum-css/dropzone@7.0.0-s2-foundations.16": version "7.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-7.0.0-s2-foundations.16.tgz#7f926a05d6376e67fb644540ca36e7a4d2f0eea1" integrity sha512-I7/lAzztQfBmYzSKYO3pnuRPQKgjNgPP5mYsDEvjB7vP5/zlc6WyahL89g03W8yFcnTfPNClK3mrkEwOkvIgxA== @@ -5381,162 +5453,162 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/expressvars/-/expressvars-3.0.9.tgz#72678e0845c240bc9cb6b4d828f20806810f4cab" integrity sha512-mnxdnF2NGNdba+3OomwFURPG0XqNRD+S2cmX0ARYnia9lv84HpzhbSoGuqmQO4+4+dXe46zYjnKRe2L8oJM/zw== -"@spectrum-css/fieldgroup@^6.0.0-s2-foundations.16": +"@spectrum-css/fieldgroup@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-6.0.0-s2-foundations.16.tgz#09621cc906eaebb87e02db093aeff582d0694bff" integrity sha512-2VnAgU+HwxdMYTiJKy00kkzYotN1Pljb2EkLEInNpXrVDwQsk+XNUHa5fToHJj9CIGy/a+Uot5byJcoQm9nHBg== -"@spectrum-css/fieldlabel@^9.0.0-s2-foundations.16": +"@spectrum-css/fieldlabel@9.0.0-s2-foundations.16": version "9.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-9.0.0-s2-foundations.16.tgz#011d0b35c18092da1de10d6d5b9e672d47a7432e" integrity sha512-kaHr/BOf5egp5vCalcVvEMTBAYzdBAF7D5X6h4qvLIH6mnXGXG9QKawbYjIlb28WAdQKqVmxp3FBM3VI4ik2kg== -"@spectrum-css/helptext@^6.0.0-s2-foundations.15": +"@spectrum-css/helptext@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/helptext/-/helptext-6.0.0-s2-foundations.15.tgz#c90d5f5e3fd27d53e1bb7f4a48516e939dad6630" integrity sha512-TskWjui0Kx6XRWZFr+GZ59lZCktdPSGCGL5cgOHNXLUpTB49aGM7wNreJzKw+OytGLkJoQ59G0Ms2SZRhhNnGQ== -"@spectrum-css/icon@^8.0.0-s2-foundations.16": +"@spectrum-css/icon@8.0.0-s2-foundations.16": version "8.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.16.tgz#94b04fa1d30c378d21bb12a137095472b2596451" integrity sha512-Cy2kAgP9vO2+Jw93zToIZrlJITp+HiOmvVkUchpX8Og7M2zEV8FixlDaqFaZ4A8uN3aFuYb0tcHa6u6rxyDQlA== -"@spectrum-css/icon@^8.0.0-s2-foundations.17": +"@spectrum-css/icon@8.0.0-s2-foundations.17": version "8.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.17.tgz#f03087beb736cdfe0ba05e28e79cff6dc4a8db89" integrity sha512-zOu84SxjW8AOtjrgtIG7ZkAyZHeAnTnKwRNWsSCR/WnApFhbf8nuAzQyWJAw5i8WPgsd8KqcRdLPcMWrc8jDqg== -"@spectrum-css/illustratedmessage@^8.0.0-s2-foundations.15": +"@spectrum-css/illustratedmessage@8.0.0-s2-foundations.15": version "8.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-8.0.0-s2-foundations.15.tgz#64a9b70699e6e45aa8437b8f9b89923188ad262d" integrity sha512-YNXhd5p+TJXnLfuw8DPBQkUnJkdjqgwEx7hRkUZ67mvXv8xOLjBRGj+IKoLNsQtzisa0EQ8qgazCSyLlzX2lvw== -"@spectrum-css/infieldbutton@^6.0.0-s2-foundations.16": +"@spectrum-css/infieldbutton@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/infieldbutton/-/infieldbutton-6.0.0-s2-foundations.16.tgz#0aa930592730d57a69dc4dcff5a84ad4d7f03957" integrity sha512-ArlIxQsnpZXOkHjHsCADrBaQvu2T+uFBewM5eC95TPqUySX7bOaJgBS8Yku4hgtdGfXYllIr9ee+LIOjsTTr/w== -"@spectrum-css/link@^6.0.0-s2-foundations.15": +"@spectrum-css/link@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-6.0.0-s2-foundations.15.tgz#fa2459d4dc31fb167c6aa9dfadc6b60b5e06c7cc" integrity sha512-As+jvvwoWX5a3L1XaCHd9vFHQHjD7x2I+eWuV/YycQT4WmOB0mjYkRDdMGgKiOvn/Xh5iopTyJhmWskLmPJAOg== -"@spectrum-css/menu@^8.0.0-s2-foundations.16": +"@spectrum-css/menu@8.0.0-s2-foundations.16": version "8.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-8.0.0-s2-foundations.16.tgz#82ad4d5ce4025cf218f3b2d715f300048cb57426" integrity sha512-yvsRQ2LcVMkmelFOtSZKUQgB/+r/rOutaQlHaRzVrWJFNRsNtS/f6l8AiXwv9cs3P8raAEjKoqLuat2Ok5gwdw== -"@spectrum-css/meter@^0.0.0-s2-foundations.2": +"@spectrum-css/meter@0.0.0-s2-foundations.2": version "0.0.0-s2-foundations.2" resolved "https://registry.yarnpkg.com/@spectrum-css/meter/-/meter-0.0.0-s2-foundations.2.tgz#b4f82e497a42b2473a76bbeeede708012cccae39" integrity sha512-h4v/sxFX3y/MEwVEMXPpIovXGTKqpFirLRPK1sBVHtw8QgnPweQPgRsmX5kiKDhbupZfma7LRDhy4vTPDMBAvg== -"@spectrum-css/modal@^6.0.0-s2-foundations.16": +"@spectrum-css/modal@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-6.0.0-s2-foundations.16.tgz#66e57697e9205dc98cfb8cc501a88cfe17cc61c0" integrity sha512-SiRZppJsPTZm3MtQt7nRUxbUVgP5eQWgH0pcZxC+6lA3W46ww+KEt1VIYpP1sMeud16RG+2vyKj2gGtOkgdu6A== -"@spectrum-css/opacitycheckerboard@^3.0.0-s2-foundations.13": - version "3.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-3.0.0-s2-foundations.15.tgz#1d8024c46ba149a89066686a0f9692c35b5770bd" - integrity sha512-dlf84/8Wgmd4qDFd9nSrIOoLH97TvOL7qCFnlJ3+VD5qjg2g9II4mXyABmaMnf3ZWZsGNtLU8o9s2huo4DSn9Q== +"@spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13": + version "3.0.0-s2-foundations.13" + resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-3.0.0-s2-foundations.13.tgz#f6020328a6204746b13915dc9486823fd7d652cf" + integrity sha512-qpkPHnC/F/6vbBrQ4CAXdCaKVFiZfdew9jX+LGh3yq3x8gAyfDWUcBZXjXVRnKqy0WKpT8xyB1KgXLHYywG0sA== -"@spectrum-css/picker@^9.0.0-s2-foundations.15": +"@spectrum-css/picker@9.0.0-s2-foundations.15": version "9.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-9.0.0-s2-foundations.15.tgz#bc3e0f041a1debb01b667041301a8cc5d202d4bc" integrity sha512-wb7KfAhF08wJDjZm1hjA/01ZcqS66ZEpEVPD1WhDsqDYJankDn9LQPEqrvGlq/eNsVq3MCmpq10Zipe679dXCQ== -"@spectrum-css/pickerbutton@^6.0.0-s2-foundations.16": +"@spectrum-css/pickerbutton@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-6.0.0-s2-foundations.16.tgz#19ec8da128a12cd5b424289295bb73d839af915b" integrity sha512-nxeVWihjyR9fygQEADuXHarbHdoDi6AGdhB/7TvFJc+j57QOlNRkq3OlmS57dw6Znfb1Q6oeyL9Ys567016lnA== -"@spectrum-css/popover@^8.0.0-s2-foundations.16": +"@spectrum-css/popover@8.0.0-s2-foundations.16": version "8.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-8.0.0-s2-foundations.16.tgz#9bc3437b704c989713ef19f44522799762dd9828" integrity sha512-yxTIi7EEZdAcxiJu2XQjacYMmaP9afUM07S3neARzuKZBuSphGgT0RjNcPPZ2jcMqICtteJIxsc1QQaFDEzSuA== -"@spectrum-css/progressbar@^5.0.0-s2-foundations.19": +"@spectrum-css/progressbar@5.0.0-s2-foundations.19": version "5.0.0-s2-foundations.19" resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-5.0.0-s2-foundations.19.tgz#3f11c877b0e4589936b4e6820855c76033dd8409" integrity sha512-IqKnB16g+sm4WRW7eDvwPCKj+siWLwHdbzAIMkOO+SObqK8xxitod11NgbCVrRXcPfZ+L5h1+5bkTn0hmv8GIA== -"@spectrum-css/progresscircle@^4.0.0-s2-foundations.15": +"@spectrum-css/progresscircle@4.0.0-s2-foundations.15": version "4.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-4.0.0-s2-foundations.15.tgz#2da932696854a7b1aac1497e036d2f0e811c922c" integrity sha512-FQ4cPSVgyKjhQlsThq5UKo1VARpHCcDoabCI1SnMdl8Hnef5VtaIui2Yxmmht5S8wrhXlFRd23f3auQlyVaIrg== -"@spectrum-css/radio@^10.0.0-s2-foundations.15": - version "10.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-10.0.0-s2-foundations.17.tgz#1d6977308eca33c48e99d05856a60733980b8475" - integrity sha512-rrvTAjdPPHJ+b2l4vMLbsiMg610UkiMm0Ht1H7T9A8Yy8VNJbmj/wLC13Lroe0GRkWLngKa4KRnXZuN1REYm4Q== +"@spectrum-css/radio@10.0.0-s2-foundations.15": + version "10.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-10.0.0-s2-foundations.15.tgz#a5e7efec0e2e734f63058c2cb1cd9be6e6e93fcc" + integrity sha512-FEbVw6kKlurff9Ekd1ngfKB+TcfOoACYwx486TxuqBkmWpebzmmhWSWioj0r73I5tmZZESPqA3B0ijgl7ReX/Q== -"@spectrum-css/search@^8.0.0-s2-foundations.17": - version "8.0.0-s2-foundations.18" - resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-8.0.0-s2-foundations.18.tgz#415fe6e242c02798b6e5f7ab9877d865868a7b47" - integrity sha512-zT0N8Zq4hVUXvGrXFIq/FwdrAgjUgi5vc22K2ztndr2czkeu0Ncg64LseOtP3/J4TdMDGSib3RpdBuXFlFWuJg== +"@spectrum-css/search@8.0.0-s2-foundations.17": + version "8.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-8.0.0-s2-foundations.17.tgz#736860bfb69d3af90f94c958c145dc8469f2f13c" + integrity sha512-FCSoyh4148YlS6ekYuZiu+hAozf3JgxvkT0oYfrbx6AurJxTahO9HAEyUmSPAr5xqWCfD6kN39Ik46Hk9DAuww== -"@spectrum-css/sidenav@^6.0.0-s2-foundations.15": +"@spectrum-css/sidenav@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-6.0.0-s2-foundations.15.tgz#1dadb2d7a4bdc511ddf5b28cdbc52cb4bedc3951" integrity sha512-BtvWA6j2uDCHNsI8TjH2QHGZIYrWsBTKWlY0E6YKI4iWlwJjsQZ6LmLphIkyveofGhOALbTdLIYlYqA5zs2WXw== -"@spectrum-css/slider@^6.0.0-s2-foundations.17": +"@spectrum-css/slider@6.0.0-s2-foundations.17": version "6.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-6.0.0-s2-foundations.17.tgz#230b0f5fb478b0ef44ab348bedb4d6e85719522c" integrity sha512-Vt1wA4lgLjsi4nqln//2iArI+v1I0USpMBxmX2hQmjsOgM1a3sHikcwyagPLUQjGa73udx0XIgdLJwvrrtmH6w== -"@spectrum-css/splitview@^6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-6.0.0-s2-foundations.16.tgz#98ab6b5b1f0b8fb1983f06892af5efbf78950fac" - integrity sha512-qnK/xKXFvCub+j4KyZWP+uj7pvY9zWRpq7zHHOw1epDpFC3Yzy/sLBXU32UGyioPe7UlegiBKwREBMbXeu23OA== +"@spectrum-css/splitview@6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-6.0.0-s2-foundations.15.tgz#415ed60da1467d8488b649a2f894bd792ba6762a" + integrity sha512-p+7ylMZvWKoBwcjY99bjuKzaNIOMx/XWdBrYvKiaes00FKVR1lm8HJNqwKjuO46OgIu88XUdWvn585do2TxCeA== -"@spectrum-css/statuslight@^8.0.0-s2-foundations.15": +"@spectrum-css/statuslight@8.0.0-s2-foundations.15": version "8.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-8.0.0-s2-foundations.15.tgz#55abd832dde8789563b77e9d8d0395a39c520fbb" integrity sha512-cSEV15oGA31IfeFlas1eSv621FX0K8eu5f2ETD9iW9MDQSH+TebUn7UAV+yJJ1O3BQSMJn7FFw4CmV/5+8An/A== -"@spectrum-css/stepper@^7.0.0-s2-foundations.18": +"@spectrum-css/stepper@7.0.0-s2-foundations.18": version "7.0.0-s2-foundations.18" resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-7.0.0-s2-foundations.18.tgz#d1492449d778739dce14074569a280957fb264d3" integrity sha512-D4PUgy81VpLRdd5IDB4hXWmekdfLF29aaGI2Kvt5ny9gSK/qeNGd90srG+SBUBwSfLKvE8Cc6kov7KVwFDnCdw== -"@spectrum-css/swatch@^7.0.0-s2-foundations.17": +"@spectrum-css/swatch@7.0.0-s2-foundations.17": version "7.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-7.0.0-s2-foundations.17.tgz#ac9ce4d0c98d89bdc7b901c7aaf0c8b4bd15d5bc" integrity sha512-5/EodsO+jVozkeJV99zaXNjaX/3Bk6Xl5qUi2INEiMTHkJg+vPNejdWyEaFxqOhD0vE37nwYIhGYHcElA60OBg== -"@spectrum-css/swatchgroup@^4.0.0-s2-foundations.15": +"@spectrum-css/swatchgroup@4.0.0-s2-foundations.15": version "4.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-4.0.0-s2-foundations.15.tgz#a7095c8e9b322b82b6e589cd0e57a8ed33fb6806" integrity sha512-u5JEvtMDwOblUzXFK5H9eCzXZoltf+kXHzH2RNKsZ2Lmp3lnWz0cHgh4c54aL/QGdcWXbTAQks6WirITZXAApg== -"@spectrum-css/switch@^6.0.0-s2-foundations.16": +"@spectrum-css/switch@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-6.0.0-s2-foundations.16.tgz#42e16ae732ddee0b048f761602a423a9df59eb83" integrity sha512-YKUx4ibZoj4ra9smPi1R9Jtuq4afS6HJP7L3HDIgqsMtrZK9atZbcSyIBU//VC+OTSGJGvzdTsA34ahmWFdS7g== -"@spectrum-css/table@^7.0.0-s2-foundations.17": +"@spectrum-css/table@7.0.0-s2-foundations.17": version "7.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-7.0.0-s2-foundations.17.tgz#822669475039492182416b8d8d13ac4626803373" integrity sha512-+mxUueuVsQ7neBEG03rCeKQe+OJsXqgCFyw56NH5cpgIN3f4/nK5zcpN8F3LT7NysvQU5JqTEmYyBCkO20ZnEw== -"@spectrum-css/tabs@^6.0.0-s2-foundations.16": +"@spectrum-css/tabs@6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-6.0.0-s2-foundations.16.tgz#643e078adb6e65e6f3fc71926752ee020e666d6f" integrity sha512-FNfj5L98To7TeqIUqhrwvV7BQnv3RIA76R3BwEUjZF94rfQS6QS5rQX98jKuooBXHyOsLclOBhXGpHm+8rpIgw== -"@spectrum-css/tag@^10.0.0-s2-foundations.15": +"@spectrum-css/tag@10.0.0-s2-foundations.15": version "10.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-10.0.0-s2-foundations.15.tgz#a7366d7b6054dd74ac0935ee01edef4db21126a4" integrity sha512-Rx021fhA7CNLLQhpL8O+DOoTHXVTAmMMhdfdZaw0sOcTCwoTGg2lnV85X0qdgxuUtAZEzfpXnIBm4XPoZ535Rg== -"@spectrum-css/taggroup@^6.0.0-s2-foundations.15": +"@spectrum-css/taggroup@6.0.0-s2-foundations.15": version "6.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-6.0.0-s2-foundations.15.tgz#0e2b0545a381d5e55c047249e9130a0fd7316e4e" integrity sha512-GC1MbsgNajX8MmWPm75azXCpeKaOnKNc7KwQTznQbTGvdAeq0w63wBc4LcxFlLpoMMF4usR6RCRlRl1OKQFj9A== -"@spectrum-css/textfield@^8.0.0-s2-foundations.16": +"@spectrum-css/textfield@8.0.0-s2-foundations.16": version "8.0.0-s2-foundations.16" resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-8.0.0-s2-foundations.16.tgz#3391af0b7cf89b4b7e658621f7fa42d8fa4e3985" integrity sha512-ydz8joF4rNmbpJFhnNL2UrhmWKEo9vP3LAKQaTV7HPZGeLZVLsuIt7+ackynJIJDUsBcthxMTIKi1g1eSmXsWA== @@ -5546,7 +5618,7 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-6.2.0.tgz#0fe5755de787b08070713ccb80975d340adcb916" integrity sha512-7nZ284oMt1AuOFbxg90KCd9BbN/Jsu/gWpoLsdS6KTI4GLmlZq5dVfB3X/zuR9LWOXTK68PLYZ9wKQQzZ1N7nA== -"@spectrum-css/toast@^11.0.0-s2-foundations.15": +"@spectrum-css/toast@11.0.0-s2-foundations.15": version "11.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-11.0.0-s2-foundations.15.tgz#2ef09e24a68a1f8f30eb208f07eac009e9673a3a" integrity sha512-xID5vAl6bwVkBqZJ3OTsI0dE5RtSz9DY4Dnsz9IPqoF3S+Ur4vTPetcLPsqLa8qtceLo+y/aoxGIsOxuq1yw5g== @@ -5561,22 +5633,22 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.3.1.tgz#52079bad1a9d6329bfcba00702c579366a83c72e" integrity sha512-YQBEvccp5jC9dxNMSLb708ucrxY64nExvFfJ0iQ+ddlAraOykFFoCTGcQ5UvSNp31Dp348H05PB7zRoStl0Jdg== -"@spectrum-css/tooltip@^7.0.0-s2-foundations.15": +"@spectrum-css/tooltip@7.0.0-s2-foundations.15": version "7.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-7.0.0-s2-foundations.15.tgz#5380bac0eea1022fd196b119a886e174a7ae5e43" integrity sha512-qqy6i5PiW3VzyoXwKVrSyMGj9GkioYERlGaG4SIOoBQ39AzE0xMALJuzCzQTlLBIAlgaZjrQOEXMwDL6EOSGSg== -"@spectrum-css/tray@^4.0.0-s2-foundations.15": +"@spectrum-css/tray@4.0.0-s2-foundations.15": version "4.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-4.0.0-s2-foundations.15.tgz#fb996c55998c41c4dd93f281d982babb4314e4b0" integrity sha512-NxtdtEjt23/z3Njr+fKBDQJSZp1NfGBmF9Ec14zGY1PR1vbnstlt6Ocgp+ZWFHng+u71F/Bc6qNEPARemJlXVw== -"@spectrum-css/typography@^7.0.0-s2-foundations.17": +"@spectrum-css/typography@7.0.0-s2-foundations.17": version "7.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-7.0.0-s2-foundations.17.tgz#661a488a3f886a0582c7198c97e496ce4ebf279b" integrity sha512-gEEgUytlVdxdU0yv0RKuDrmjD8lP/Lh9ZMDSrYCNFEfRuAdVzc2LLFV/192neBGATCvfs5asvTHSl/lriCsmjg== -"@spectrum-css/ui-icons-s2@npm:@spectrum-css/ui-icons@^2.0.0-s2-foundations.10": +"@spectrum-css/ui-icons-s2@npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10": version "2.0.0-s2-foundations.10" resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-2.0.0-s2-foundations.10.tgz#0484d599aca3cbe63d5e71b415947d18f8296333" integrity sha512-8uOHTqrVrzCel3mn8K1epNpbeNrM9+0FfyQG0/sGznf9YkHfiyNU16tNfCFOx/CmzrvyuJbFDNbgEdZnNRzQLQ== @@ -5586,7 +5658,7 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-1.1.2.tgz#596e10c662de2b3a2142277998be5e11faf6aff4" integrity sha512-rD0EOdabyUJ6pjfvh9eiGlvhk2huhaah+AG8Utzqh/+YgMCn+NQEUz2zxRo9Jva8GXxORLGLDtISafHguOtiOA== -"@spectrum-css/underlay@^5.0.0-s2-foundations.15": +"@spectrum-css/underlay@5.0.0-s2-foundations.15": version "5.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-5.0.0-s2-foundations.15.tgz#18b82245e6f09752f14642b8f6c87240544fc786" integrity sha512-47BLHveo2/VUI+pqnVTXk3rvguTA4v08V+PDfQOkYqt9upG8ugWhZJL3+7VdhXuVNpHBlWeJA6qcnpRfumr8ZQ== @@ -5597,7 +5669,7 @@ integrity sha512-rGfd7jqXOdR69bEjrRP58ynuIeJU0czPfwQvzhtCzg7jKVukV+efNHqrs086sC6xutB3W4TF71K/dZMr3oyTyg== "@spectrum-web-components/eslint-plugin@file:./linters/eslint": - version "1.0.1" + version "1.0.3" "@storybook/addon-a11y@^7.5.0": version "7.6.20" @@ -7302,6 +7374,24 @@ resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== +"@vercel/nft@0.27.7": + version "0.27.7" + resolved "https://registry.yarnpkg.com/@vercel/nft/-/nft-0.27.7.tgz#92e27ef1860f1a1d1838b76098996aae165d9b98" + integrity sha512-FG6H5YkP4bdw9Ll1qhmbxuE8KwW2E/g8fJpM183fWQLeVDGqzeywMIeJ9h2txdWZ03psgWMn6QymTxaDLmdwUg== + dependencies: + "@mapbox/node-pre-gyp" "^1.0.11" + "@rollup/pluginutils" "^5.1.3" + acorn "^8.6.0" + acorn-import-attributes "^1.9.5" + async-sema "^3.1.1" + bindings "^1.4.0" + estree-walker "2.0.2" + glob "^7.1.3" + graceful-fs "^4.2.9" + micromatch "^4.0.8" + node-gyp-build "^4.2.2" + resolve-from "^5.0.0" + "@vercel/nft@^0.27.0": version "0.27.1" resolved "https://registry.yarnpkg.com/@vercel/nft/-/nft-0.27.1.tgz#79415f8f65b362dca2f89f44dd58281917cc13bd" @@ -10027,7 +10117,7 @@ colors-option@^4.4.0: chalk "^5.0.1" is-plain-obj "^4.1.0" -colors@1.4.0: +colors@1.4.0, colors@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA== @@ -14602,13 +14692,6 @@ hosted-git-info@^7.0.0: dependencies: lru-cache "^10.0.1" -hot-shots@10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/hot-shots/-/hot-shots-10.0.0.tgz#d360f9dd252da78297aca1cb08fd84a8936739c2" - integrity sha512-uy/uGpuJk7yuyiKRfZMBNkF1GAOX5O2ifO9rDCaX9jw8fu6eW9QeWC7WRPDI+O98frW1HQgV3+xwjWsZPECIzQ== - optionalDependencies: - unix-dgram "2.x" - hot-shots@10.2.1: version "10.2.1" resolved "https://registry.yarnpkg.com/hot-shots/-/hot-shots-10.2.1.tgz#dbc70dd005c12f24b5484aa5af8d97446e9b945e" @@ -19452,12 +19535,12 @@ netlify@13.1.21, netlify@^13.1.21: p-wait-for "^4.0.0" qs "^6.9.6" -netlify@^13.1.20: - version "13.1.20" - resolved "https://registry.yarnpkg.com/netlify/-/netlify-13.1.20.tgz#a84842fea17c497ea20d72b46bb1e9029ab2d9ce" - integrity sha512-pfYUCfaywrzkMzN8If4IVM58DqsAYq2JroAFziuYK7m0LKYPzlbuSNYWhlfQL/zoBmRm8kxzRxEiK6fj1tvOOw== +netlify@^13.2.0: + version "13.2.0" + resolved "https://registry.yarnpkg.com/netlify/-/netlify-13.2.0.tgz#376ae6a2fffdfd9a2a853948dc4a87b33830967d" + integrity sha512-kOBfGlg3EMCjMLIBYjg0geMZaqzL75gg3bAuarjtj+/66zxbhh5qF6ZNQs+Tcq2MT3oJXG3ENKVNdnuvD1i5ag== dependencies: - "@netlify/open-api" "^2.33.1" + "@netlify/open-api" "^2.35.0" lodash-es "^4.17.21" micro-api-client "^3.3.0" node-fetch "^3.0.0" @@ -21153,6 +21236,11 @@ picomatch@^3.0.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-3.0.1.tgz#817033161def55ec9638567a2f3bbc876b3e7516" integrity sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag== +picomatch@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab" + integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg== + pidtree@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c" From 1ae838856f98332d6f8aa463fbf1efb3531984f1 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Thu, 9 Jan 2025 11:56:29 +0530 Subject: [PATCH 2/3] chore(thumbnail): update css version to latest --- packages/thumbnail/package.json | 2 +- packages/thumbnail/src/spectrum-thumbnail.css | 292 +++++++----------- .../thumbnail/src/thumbnail-overrides.css | 85 +---- tools/styles/tokens-v2/component-bridge.css | 1 + .../tokens/express/component-bridge.css | 1 + .../tokens/spectrum/component-bridge.css | 1 + yarn.lock | 8 +- 7 files changed, 120 insertions(+), 270 deletions(-) diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index cc13cc9329..fa194be1e9 100644 --- a/packages/thumbnail/package.json +++ b/packages/thumbnail/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^1.0.1" }, "devDependencies": { - "@spectrum-css/thumbnail": "6.2.0" + "@spectrum-css/thumbnail": "7.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index d26a0f383a..f7723b6891 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -11,94 +11,125 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - --spectrum-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --spectrum-thumbnail-border-width-selected: var( - --spectrum-border-width-200 - ); - --spectrum-thumbnail-border-color-selected: var( - --spectrum-accent-color-800 - ); - --spectrum-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-thumbnail-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); +:host, +:host([size='500']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); } :host([size='50']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); } :host([size='75']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); } :host([size='100']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); } :host([size='200']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); } :host([size='300']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); } :host([size='400']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); -} - -:host([size='500']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); } :host([size='600']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); } :host([size='700']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); } :host([size='800']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); } :host([size='900']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); } :host([size='1000']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); } :host { - inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - vertical-align: top; + --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; @@ -109,10 +140,7 @@ governing permissions and limitations under the License. :host, :host:before { - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + border-radius: var(--spectrum-thumbnail-border-radius-default); } :host:before { @@ -120,18 +148,8 @@ governing permissions and limitations under the License. z-index: 2; inline-size: 100%; block-size: 100%; - box-shadow: inset 0 0 0 - var( - --mod-thumbnail-border-width, - var(--spectrum-thumbnail-border-width) - ) - var( - --highcontrast-thumbnail-border-color, - var( - --mod-thumbnail-border-color, - var(--spectrum-thumbnail-border-color-rgba) - ) - ); + box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) + var(--spectrum-thumbnail-border-color); position: absolute; } @@ -149,93 +167,45 @@ governing permissions and limitations under the License. :host([focused]):after { content: ''; border-style: solid; - border-width: var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-thumbnail-focus-indicator-color, - var( - --mod-thumbnail-focus-indicator-color, - var(--spectrum-thumbnail-focus-indicator-color) - ) - ); - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + 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( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) + var(--spectrum-thumbnail-focus-indicator-gap) + + var(--spectrum-thumbnail-focus-indicator-thickness) ) * -1 ); inset-block-end: calc( ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) + var(--spectrum-thumbnail-focus-indicator-gap) + + var(--spectrum-thumbnail-focus-indicator-thickness) ) * -1 ); inset-inline-start: calc( ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) + var(--spectrum-thumbnail-focus-indicator-gap) + + var(--spectrum-thumbnail-focus-indicator-thickness) ) * -1 ); inset-inline-end: calc( ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) + var(--spectrum-thumbnail-focus-indicator-gap) + + var(--spectrum-thumbnail-focus-indicator-thickness) ) * -1 ); } :host([focused]) .image-wrapper { - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + border-radius: var(--spectrum-thumbnail-border-radius-default); overflow: hidden; } :host([layer]) { border-style: solid; - border-width: var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ); - border-color: var( - --highcontrast-thumbnail-layer-border-color-outer, - var( - --mod-thumbnail-layer-border-color-outer, - var(--spectrum-thumbnail-layer-border-color-outer) - ) - ); + 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; @@ -248,65 +218,28 @@ governing permissions and limitations under the License. :host([layer][selected]) { outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-border-color-selected, - var( - --mod-thumbnail-border-color-selected, - var(--spectrum-thumbnail-border-color-selected) - ) - ); - outline-width: var( - --mod-thumbnail-border-width-selected, - var(--spectrum-thumbnail-border-width-selected) - ); + outline-color: var(--spectrum-thumbnail-border-color-selected); + outline-width: var(--spectrum-thumbnail-border-width-selected); outline-offset: calc( - var( - --mod-thumbnail-border-width-selected, - var(--spectrum-thumbnail-border-width-selected) - ) - - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) + var(--spectrum-thumbnail-border-width-selected) - + var(--spectrum-thumbnail-layer-border-width-inner) ); } .layer-inner { inline-size: calc( var(--spectrum-thumbnail-size) - - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) * 2 + var(--spectrum-thumbnail-layer-border-width-inner) * 2 ); block-size: calc( var(--spectrum-thumbnail-size) - - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) * 2 + var(--spectrum-thumbnail-layer-border-width-inner) * 2 ); outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-layer-border-color-inner, - var( - --mod-thumbnail-layer-border-color-inner, - var(--spectrum-thumbnail-layer-border-color-inner) - ) - ); + outline-color: var(--spectrum-thumbnail-layer-border-color-inner); outline-width: calc( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - - var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ) + var(--spectrum-thumbnail-layer-border-width-inner) - + var(--spectrum-thumbnail-layer-border-width-outer) ); justify-content: center; align-items: center; @@ -322,8 +255,8 @@ governing permissions and limitations under the License. } ::slotted(*) { - max-block-size: 100%; max-inline-size: 100%; + max-block-size: 100%; z-index: 1; position: relative; } @@ -339,10 +272,7 @@ governing permissions and limitations under the License. z-index: 0; block-size: 100%; inline-size: 100%; - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + border-radius: var(--spectrum-thumbnail-border-radius-default); background-position: 50%; background-size: cover; position: absolute; diff --git a/packages/thumbnail/src/thumbnail-overrides.css b/packages/thumbnail/src/thumbnail-overrides.css index 0ba20daf97..ef0b80a2f3 100644 --- a/packages/thumbnail/src/thumbnail-overrides.css +++ b/packages/thumbnail/src/thumbnail-overrides.css @@ -3,7 +3,7 @@ This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language @@ -12,88 +12,5 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-thumbnail-size: var(--system-thumbnail-size); --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius); - --spectrum-thumbnail-border-width: var(--system-thumbnail-border-width); - --spectrum-thumbnail-border-color-rgba: var( - --system-thumbnail-border-color-rgba - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --system-thumbnail-layer-border-width-inner - ); - --spectrum-thumbnail-layer-border-color-inner: var( - --system-thumbnail-layer-border-color-inner - ); - --spectrum-thumbnail-layer-border-width-outer: var( - --system-thumbnail-layer-border-width-outer - ); - --spectrum-thumbnail-layer-border-color-outer: var( - --system-thumbnail-layer-border-color-outer - ); - --spectrum-thumbnail-border-width-selected: var( - --system-thumbnail-border-width-selected - ); - --spectrum-thumbnail-border-color-selected: var( - --system-thumbnail-border-color-selected - ); - --spectrum-thumbnail-focus-indicator-thickness: var( - --system-thumbnail-focus-indicator-thickness - ); - --spectrum-thumbnail-focus-indicator-gap: var( - --system-thumbnail-focus-indicator-gap - ); - --spectrum-thumbnail-focus-indicator-color: var( - --system-thumbnail-focus-indicator-color - ); - --spectrum-thumbnail-color-opacity-disabled: var( - --system-thumbnail-color-opacity-disabled - ); -} - -:host([size='50']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-50-size); -} - -:host([size='75']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-75-size); -} - -:host([size='100']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-100-size); -} - -:host([size='200']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-200-size); -} - -:host([size='300']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-300-size); -} - -:host([size='400']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-400-size); -} - -:host([size='500']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-500-size); -} - -:host([size='600']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-600-size); -} - -:host([size='700']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-700-size); -} - -:host([size='800']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-800-size); -} - -:host([size='900']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-900-size); -} - -:host([size='1000']) { - --spectrum-thumbnail-size: var(--system-thumbnail-size-1000-size); } diff --git a/tools/styles/tokens-v2/component-bridge.css b/tools/styles/tokens-v2/component-bridge.css index a14169af59..30087d65d6 100644 --- a/tools/styles/tokens-v2/component-bridge.css +++ b/tools/styles/tokens-v2/component-bridge.css @@ -6723,6 +6723,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); + --system-thumbnail-border-radius: 2px; --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); diff --git a/tools/styles/tokens/express/component-bridge.css b/tools/styles/tokens/express/component-bridge.css index 7a478932b3..2d2544d923 100644 --- a/tools/styles/tokens/express/component-bridge.css +++ b/tools/styles/tokens/express/component-bridge.css @@ -6719,6 +6719,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-background-color-default ); diff --git a/tools/styles/tokens/spectrum/component-bridge.css b/tools/styles/tokens/spectrum/component-bridge.css index 9226569f4a..5d439bd793 100644 --- a/tools/styles/tokens/spectrum/component-bridge.css +++ b/tools/styles/tokens/spectrum/component-bridge.css @@ -6725,6 +6725,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); diff --git a/yarn.lock b/yarn.lock index ac52b7abc4..f688bfd084 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5613,10 +5613,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-8.0.0-s2-foundations.16.tgz#3391af0b7cf89b4b7e658621f7fa42d8fa4e3985" integrity sha512-ydz8joF4rNmbpJFhnNL2UrhmWKEo9vP3LAKQaTV7HPZGeLZVLsuIt7+ackynJIJDUsBcthxMTIKi1g1eSmXsWA== -"@spectrum-css/thumbnail@6.2.0": - version "6.2.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-6.2.0.tgz#0fe5755de787b08070713ccb80975d340adcb916" - integrity sha512-7nZ284oMt1AuOFbxg90KCd9BbN/Jsu/gWpoLsdS6KTI4GLmlZq5dVfB3X/zuR9LWOXTK68PLYZ9wKQQzZ1N7nA== +"@spectrum-css/thumbnail@7.0.0-s2-foundations.18": + version "7.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-7.0.0-s2-foundations.18.tgz#652b4c846efef229505a4311b2015f0f2bf940d5" + integrity sha512-8l/WwT4VH532qpkHfGf6sTu1cTVOIWbZtBvnrxTA8CWX+3e2hnGkp4yqhSMg9RVZk3A279ImSHzUJ9xFb7sNEg== "@spectrum-css/toast@11.0.0-s2-foundations.15": version "11.0.0-s2-foundations.15" From b01a4230097eea8b56131b2b2566006aa6cb9b46 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 10 Jan 2025 17:10:36 +0530 Subject: [PATCH 3/3] chore: update css to latest foundations version --- packages/accordion/package.json | 2 +- .../accordion/src/accordion-overrides.css | 324 - .../accordion/src/spectrum-accordion-item.css | 18 +- packages/accordion/src/spectrum-accordion.css | 253 +- packages/action-bar/package.json | 2 +- .../action-bar/src/action-bar-overrides.css | 52 - .../action-bar/src/spectrum-action-bar.css | 40 + packages/action-button/package.json | 2 +- .../src/action-button-overrides.css | 506 +- .../src/spectrum-action-button.css | 727 +- packages/action-group/package.json | 2 +- .../src/action-group-overrides.css | 60 - .../src/spectrum-action-group.css | 32 +- packages/action-menu/package.json | 2 +- packages/alert-banner/package.json | 2 +- .../src/alert-banner-overrides.css | 27 - .../src/spectrum-alert-banner.css | 33 +- packages/alert-dialog/package.json | 2 +- .../src/spectrum-alert-dialog.css | 46 + packages/asset/package.json | 2 +- packages/asset/src/asset-overrides.css | 3 - packages/asset/src/spectrum-asset.css | 53 +- packages/avatar/package.json | 2 +- packages/avatar/src/spectrum-avatar.css | 70 +- packages/badge/package.json | 2 +- packages/badge/src/spectrum-badge.css | 189 +- packages/breadcrumbs/package.json | 2 +- .../breadcrumbs/src/spectrum-breadcrumbs.css | 149 + packages/button-group/package.json | 2 +- .../src/spectrum-button-group.css | 44 +- packages/button/package.json | 2 +- packages/button/src/button-overrides.css | 1072 +-- packages/button/src/spectrum-button.css | 918 ++- packages/card/package.json | 2 +- packages/card/src/card-overrides.css | 77 - packages/card/src/spectrum-card.css | 582 +- packages/checkbox/package.json | 2 +- packages/checkbox/src/checkbox-overrides.css | 122 - packages/checkbox/src/spectrum-checkbox.css | 159 +- packages/clear-button/package.json | 2 +- .../src/clear-button-overrides.css | 82 +- .../src/spectrum-clear-button.css | 108 +- packages/close-button/package.json | 2 +- .../src/close-button-overrides.css | 68 - .../src/spectrum-close-button.css | 105 +- packages/coachmark/package.json | 4 +- .../src/spectrum-coach-indicator.css | 198 +- packages/coachmark/src/spectrum-coachmark.css | 197 +- packages/color-area/package.json | 2 +- .../color-area/src/spectrum-color-area.css | 28 +- packages/color-handle/package.json | 2 +- .../src/spectrum-color-handle.css | 84 +- packages/color-loupe/package.json | 2 +- .../color-loupe/src/spectrum-color-loupe.css | 44 +- packages/color-slider/package.json | 2 +- .../src/spectrum-color-slider.css | 6 +- packages/color-wheel/package.json | 2 +- .../color-wheel/src/color-wheel-overrides.css | 14 - .../color-wheel/src/spectrum-color-wheel.css | 53 +- packages/combobox/package.json | 2 +- packages/combobox/src/combobox-overrides.css | 222 +- packages/combobox/src/spectrum-combobox.css | 403 +- packages/contextual-help/package.json | 2 +- .../src/spectrum-contextual-help.css | 18 +- packages/dialog/package.json | 2 +- packages/dialog/src/spectrum-dialog.css | 77 +- packages/divider/package.json | 2 +- packages/divider/src/spectrum-divider.css | 64 +- packages/dropzone/package.json | 2 +- packages/dropzone/src/dropzone-overrides.css | 86 - packages/dropzone/src/spectrum-dropzone.css | 87 +- packages/field-group/package.json | 2 +- .../field-group/src/spectrum-field-group.css | 2 +- packages/field-label/package.json | 2 +- .../field-label/src/spectrum-field-label.css | 102 +- packages/help-text/package.json | 2 +- packages/help-text/src/spectrum-help-text.css | 121 +- packages/icon/package.json | 2 +- packages/icon/src/spectrum-icon-arrow.css | 145 +- packages/icon/src/spectrum-icon-asterisk.css | 15 + packages/icon/src/spectrum-icon-checkmark.css | 31 + packages/icon/src/spectrum-icon-chevron.css | 145 +- .../src/spectrum-icon-corner-triangle.css | 15 + packages/icon/src/spectrum-icon-cross.css | 27 + packages/icon/src/spectrum-icon-dash.css | 31 + packages/icon/src/spectrum-icon.css | 58 +- packages/icons-ui/package.json | 2 +- packages/icons-workflow/package.json | 2 +- packages/illustrated-message/package.json | 2 +- .../src/spectrum-illustratedmessage.css | 60 + packages/infield-button/package.json | 2 +- .../src/infield-button-overrides.css | 190 - .../src/spectrum-infield-button.css | 409 +- packages/link/package.json | 2 +- packages/link/src/spectrum-link.css | 172 +- packages/menu/package.json | 2 +- packages/menu/src/menu-overrides.css | 380 - packages/menu/src/spectrum-menu.css | 284 + packages/meter/package.json | 4 +- packages/meter/src/progress-bar-overrides.css | 103 - packages/meter/src/spectrum-meter.css | 41 +- packages/meter/src/spectrum-progress-bar.css | 362 +- packages/modal/package.json | 2 +- packages/modal/src/modal-overrides.css | 21 - packages/modal/src/spectrum-modal-wrapper.css | 2 +- packages/modal/src/spectrum-modal.css | 160 +- packages/number-field/package.json | 2 +- .../src/number-field-overrides.css | 66 +- .../src/spectrum-number-field.css | 761 +- packages/picker-button/package.json | 2 +- .../src/picker-button-overrides.css | 116 - .../src/spectrum-picker-button.css | 280 +- packages/picker/package.json | 2 +- packages/picker/src/picker-overrides.css | 242 +- packages/picker/src/spectrum-picker.css | 241 +- packages/popover/package.json | 2 +- packages/popover/src/popover-overrides.css | 23 - packages/popover/src/spectrum-popover.css | 33 +- packages/progress-bar/package.json | 2 +- .../src/progress-bar-overrides.css | 103 - .../src/spectrum-progress-bar.css | 360 +- packages/progress-circle/package.json | 2 +- .../src/progress-circle-overrides.css | 24 - .../src/spectrum-progress-circle.css | 55 +- packages/radio/package.json | 2 +- packages/radio/src/radio-overrides.css | 180 - packages/radio/src/spectrum-radio.css | 146 +- packages/search/package.json | 2 +- packages/search/src/search-overrides.css | 74 +- packages/search/src/spectrum-search.css | 130 +- packages/sidenav/package.json | 2 +- .../sidenav/src/sidenav-heading-overrides.css | 146 - .../sidenav/src/sidenav-item-overrides.css | 146 - packages/sidenav/src/sidenav-overrides.css | 146 - .../sidenav/src/spectrum-sidenav-heading.css | 101 + .../sidenav/src/spectrum-sidenav-item.css | 122 +- packages/sidenav/src/spectrum-sidenav.css | 100 + packages/slider/package.json | 2 +- packages/slider/src/slider-overrides.css | 133 - packages/slider/src/spectrum-slider.css | 527 +- packages/split-view/package.json | 2 +- .../split-view/src/spectrum-split-view.css | 19 + .../split-view/src/split-view-overrides.css | 33 - packages/status-light/package.json | 2 +- .../src/spectrum-status-light.css | 153 + packages/swatch/package.json | 4 +- packages/swatch/src/spectrum-swatch-group.css | 15 +- packages/swatch/src/spectrum-swatch.css | 66 +- packages/swatch/src/swatch-overrides.css | 77 - packages/switch/package.json | 2 +- packages/switch/src/spectrum-switch.css | 183 +- packages/switch/src/switch-overrides.css | 138 - packages/table/package.json | 2 +- packages/table/src/spectrum-table-body.css | 7 +- packages/table/src/spectrum-table-cell.css | 8 +- .../src/spectrum-table-checkbox-cell.css | 9 +- .../table/src/spectrum-table-head-cell.css | 5 +- packages/table/src/spectrum-table-row.css | 48 +- packages/table/src/spectrum-table.css | 382 +- packages/table/src/table-overrides.css | 438 +- packages/tabs/package.json | 2 +- packages/tabs/src/spectrum-tabs-sizes.css | 100 +- packages/tabs/src/spectrum-tabs.css | 200 +- packages/tabs/src/tabs-overrides.css | 57 - packages/tags/package.json | 4 +- packages/tags/src/spectrum-tag.css | 222 + packages/tags/src/spectrum-tags.css | 2 + packages/tags/src/tag-overrides.css | 298 +- packages/textfield/package.json | 2 +- packages/textfield/src/spectrum-textfield.css | 386 +- .../textfield/src/textfield-overrides.css | 383 - packages/toast/package.json | 2 +- packages/toast/src/spectrum-toast.css | 110 +- packages/toast/src/toast-overrides.css | 54 - packages/tooltip/package.json | 2 +- packages/tooltip/src/spectrum-tooltip.css | 55 + packages/tooltip/src/tooltip-overrides.css | 54 - packages/tray/package.json | 2 +- packages/tray/src/spectrum-tray.css | 134 +- packages/underlay/package.json | 2 +- packages/underlay/src/spectrum-underlay.css | 119 +- scripts/spectrum-vars.js | 20 +- scripts/update-spectrum-css.js | 15 +- tools/opacity-checkerboard/package.json | 2 +- .../src/spectrum-is-opacity-checkerboard.css | 46 +- .../src/spectrum-opacity-checkerboard.css | 46 +- tools/styles/fonts.css | 164 - tools/styles/tokens-v2/component-bridge.css | 7107 ++-------------- .../tokens/express/component-bridge.css | 7070 ++-------------- .../tokens/spectrum/component-bridge.css | 7112 ++--------------- tools/styles/typography.css | 164 - yarn.lock | 538 +- 192 files changed, 10651 insertions(+), 30151 deletions(-) diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 137ee9abd4..f27b0490c8 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -75,7 +75,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/accordion": "6.0.0-s2-foundations.16" + "@spectrum-css/accordion": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css index 89b5f63fb9..ee2ab43ff1 100644 --- a/packages/accordion/src/accordion-overrides.css +++ b/packages/accordion/src/accordion-overrides.css @@ -12,329 +12,5 @@ /* 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 - ); -} - -: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 - ); -} - -: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([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--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='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']) { - --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'][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 - ); } diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 62b4a13c44..1b1abcbc4c 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -315,6 +315,15 @@ governing permissions and limitations under the License. ); } +@media (forced-colors: active) { + #header:after { + forced-color-adjust: none; + content: ''; + position: absolute; + inset-inline-start: 0; + } +} + :host([open]) > #heading > .iconContainer > .indicator, :host([open]) > .iconContainer > .indicator { transform: rotate(90deg); @@ -328,12 +337,3 @@ governing permissions and limitations under the License. :host([disabled]) #header { cursor: default; } - -@media (forced-colors: active) { - #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..a528c25b85 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -12,6 +12,104 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --spectrum-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --spectrum-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --spectrum-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --spectrum-accordion-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --spectrum-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-accordion-item-header-font: var( + --spectrum-sans-font-family-stack + ); + --spectrum-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --spectrum-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); + --spectrum-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --spectrum-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --spectrum-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --spectrum-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --spectrum-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --spectrum-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( @@ -33,24 +131,161 @@ governing permissions and limitations under the License. ) ) ); - margin: 0; - padding: 0; - list-style: none; - display: block; +} + +:host:dir(rtl), +:host([dir='rtl']) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } :host:lang(ja), :host:lang(ko), :host:lang(zh) { --spectrum-accordion-item-header-line-height: var( - --spectrum-accordion-item-header-line-height-cjk + --spectrum-cjk-line-height-100 ); --spectrum-accordion-item-content-line-height: var( - --spectrum-accordion-item-content-line-height-cjk + --spectrum-cjk-line-height-100 ); } -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host([density='compact']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); +} + +:host([density='compact'][size='s']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); +} + +:host([density='compact'][size='l']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); +} + +:host([density='compact'][size='xl']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); +} + +:host([density='spacious']) { + --spectrum-accordion-item-header-line-height: 1.278; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); +} + +:host([density='spacious'][size='s']) { + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); +} + +:host([density='spacious'][size='l']) { + --spectrum-accordion-item-header-line-height: 1.273; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); +} + +:host([density='spacious'][size='xl']) { + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); +} + +:host([size='s']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); +} + +:host([size='l']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); +} + +:host([size='xl']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-400); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); +} + +:host { + margin: 0; + padding: 0; + list-style: none; + display: block; } diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index 8ce8116fd2..a392e3e3e0 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/popover": "^1.0.3" }, "devDependencies": { - "@spectrum-css/actionbar": "9.0.0-s2-foundations.16" + "@spectrum-css/actionbar": "^9.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css index 704eb774f8..19fdd53045 100644 --- a/packages/action-bar/src/action-bar-overrides.css +++ b/packages/action-bar/src/action-bar-overrides.css @@ -12,62 +12,10 @@ /* 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); } diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css index d12552d3d2..a32f4c1ee1 100644 --- a/packages/action-bar/src/spectrum-action-bar.css +++ b/packages/action-bar/src/spectrum-action-bar.css @@ -11,6 +11,46 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-actionbar-height: var(--spectrum-action-bar-height); + --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); + --spectrum-actionbar-item-counter-line-height: var( + --spectrum-line-height-100 + ); + --spectrum-actionbar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-actionbar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); + --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); + --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); + --spectrum-actionbar-spacing-close-button-start: var( + --spectrum-spacing-100 + ); + --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); + --spectrum-actionbar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); + --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); + --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); + --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); + --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); + --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-actionbar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); +} + @media (forced-colors: active) { :host, :host([emphasized]) #popover { diff --git a/packages/action-button/package.json b/packages/action-button/package.json index 339aaa6060..d815cefa7a 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/actionbutton": "7.0.0-s2-foundations.22" + "@spectrum-css/actionbutton": "^7.0.0-s2-foundations.24" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css index 18725b2d1a..7641651c8d 100644 --- a/packages/action-button/src/action-button-overrides.css +++ b/packages/action-button/src/action-button-overrides.css @@ -12,36 +12,6 @@ /* 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 ); @@ -54,6 +24,21 @@ --spectrum-actionbutton-background-color-focus: var( --system-action-button-background-color-focus ); + --spectrum-actionbutton-background-color-selected-disabled: var( + --system-action-button-background-color-selected-disabled + ); + --spectrum-actionbutton-background-color-selected: var( + --system-action-button-background-color-selected + ); + --spectrum-actionbutton-background-color-selected-hover: var( + --system-action-button-background-color-selected-hover + ); + --spectrum-actionbutton-background-color-selected-down: var( + --system-action-button-background-color-selected-down + ); + --spectrum-actionbutton-background-color-selected-focus: var( + --system-action-button-background-color-selected-focus + ); --spectrum-actionbutton-border-color-default: var( --system-action-button-border-color-default ); @@ -66,33 +51,11 @@ --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-content-color-selected: var( + --system-action-button-content-color-selected ); } @@ -109,150 +72,9 @@ --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 - ); -} - -: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 ); @@ -265,105 +87,42 @@ --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-background-color-disabled: var( + --system-action-button-static-black-background-color-disabled ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-black-focus-indicator-color + --spectrum-actionbutton-background-color-selected-disabled: var( + --system-action-button-static-black-background-color-selected-disabled ); -} - -:host([static-color='black'][selected]) { --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-background-color-default + --system-action-button-static-black-background-color-default ); --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-background-color-hover + --system-action-button-static-black-background-color-hover ); --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-background-color-down + --system-action-button-static-black-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 + --system-action-button-static-black-background-color-focus ); } -:host([static-color='black'][selected][emphasized]) { +:host([static-color='black'][quiet]) { --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-emphasized-background-color-default + --system-action-button-static-black-quiet-background-color-default ); --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-emphasized-background-color-hover + --system-action-button-static-black-quiet-background-color-hover ); --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-emphasized-background-color-down + --system-action-button-static-black-quiet-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 + --system-action-button-static-black-quiet-background-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 ); @@ -376,216 +135,37 @@ --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-background-color-disabled: var( + --system-action-button-static-white-background-color-disabled ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-white-focus-indicator-color + --spectrum-actionbutton-background-color-selected-disabled: var( + --system-action-button-static-white-background-color-selected-disabled ); -} - -:host([static-color='white'][selected]) { --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-background-color-default + --system-action-button-static-white-background-color-default ); --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-background-color-hover + --system-action-button-static-white-background-color-hover ); --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-background-color-down + --system-action-button-static-white-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 + --system-action-button-static-white-background-color-focus ); } -:host([static-color='white'][selected][emphasized]) { +:host([static-color='white'][quiet]) { --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-emphasized-background-color-default + --system-action-button-static-white-quiet-background-color-default ); --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-emphasized-background-color-hover + --system-action-button-static-white-quiet-background-color-hover ); --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-emphasized-background-color-down + --system-action-button-static-white-quiet-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 - ); -} - -: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 + --system-action-button-static-white-quiet-background-color-focus ); } diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 0555c62e68..2a30e0304e 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -105,28 +105,24 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { --highcontrast-actionbutton-focus-indicator-color: ButtonText; + --highcontrast-actionbutton-content-color: ButtonText; } :host:after { forced-color-adjust: none; } + :host([disabled]), + :host([disabled]) { + --highcontrast-actionbutton-content-color: GrayText; + --highcontrast-actionbutton-border-color: GrayText; + --highcontrast-actionbutton-background-color: ButtonFace; + } + :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; + --highcontrast-actionbutton-background-color: Highlight; + --highcontrast-actionbutton-border-color: HighlightText; + --highcontrast-actionbutton-content-color: HighlightText; } :host([selected]) .hold-affordance, @@ -137,78 +133,50 @@ governing permissions and limitations under the License. } :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, + --spectrum-actionbutton-background-color: var( + --highcontrast-actionbutton-background-color, var( --mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default) ) ); - border-color: var( - --highcontrast-actionbutton-border-color-default, + --spectrum-actionbutton-border-color: var( + --highcontrast-actionbutton-border-color, var( --mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default) ) ); - color: var( - --highcontrast-actionbutton-content-color-default, + --spectrum-actionbutton-content-color: var( + --highcontrast-actionbutton-content-color, var( --mod-actionbutton-content-color-default, - var(--spectrum-actionbutton-content-color-default) + var(--spectrum-neutral-content-color-default) + ) + ); + --spectrum-actionbutton-border-radius: var( + --mod-actionbutton-border-radius, + var(--spectrum-corner-radius-100) + ); + --spectrum-actionbutton-border-width: var( + --mod-actionbutton-border-width, + var(--spectrum-border-width-100) + ); + --spectrum-actionbutton-focus-indicator-gap: var( + --mod-actionbutton-focus-indicator-gap, + var(--spectrum-focus-indicator-gap) + ); + --spectrum-actionbutton-focus-indicator-thickness: var( + --mod-actionbutton-focus-indicator-thickness, + var(--spectrum-focus-indicator-thickness) + ); + --spectrum-actionbutton-focus-indicator-color: var( + --highcontrast-actionbutton-focus-indicator-color, + var( + --mod-actionbutton-focus-indicator-color, + var(--spectrum-focus-indicator-color) ) ); - position: relative; } :host:dir(rtl), @@ -216,290 +184,448 @@ governing permissions and limitations under the License. --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([quiet]) { + --spectrum-actionbutton-border-color: transparent; } -: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) - ) +:host([emphasized]):not( + .spectrum-ActionButton--staticBlack, + .spectrum-ActionButton--staticWhite + ) { + --mod-actionbutton-background-color-default-selected: var( + --mod-actionbutton-background-color-default-selected-emphasized, + var(--spectrum-accent-background-color-default) + ); + --mod-actionbutton-background-color-hover-selected: var( + --mod-actionbutton-background-color-hover-selected-emphasized, + var(--spectrum-accent-background-color-hover) + ); + --mod-actionbutton-background-color-down-selected: var( + --mod-actionbutton-background-color-down-selected-emphasized, + var(--spectrum-accent-background-color-down) + ); + --mod-actionbutton-background-color-focus-selected: var( + --mod-actionbutton-background-color-focus-selected-emphasized, + var(--spectrum-accent-background-color-key-focus) + ); + --mod-actionbutton-content-color-default-selected: var( + --mod-actionbutton-content-color-default-selected-emphasized, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-hover-selected: var( + --mod-actionbutton-content-color-hover-selected-emphasized, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-down-selected: var( + --mod-actionbutton-content-color-down-selected-emphasized, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-focus-selected: var( + --mod-actionbutton-content-color-focus-selected-emphasized, + var(--spectrum-white) ); } -:host(:is(:active, [active])) { - background-color: var( - --highcontrast-actionbutton-background-color-down, - var( - --mod-actionbutton-background-color-down, - var(--spectrum-actionbutton-background-color-down) - ) +:host([static-color='black']) { + --mod-actionbutton-background-color-default-selected: var( + --spectrum-transparent-black-800 ); - border-color: var( - --highcontrast-actionbutton-border-color-down, - var( - --mod-actionbutton-border-color-down, - var(--spectrum-actionbutton-border-color-down) - ) + --mod-actionbutton-background-color-hover-selected: var( + --spectrum-transparent-black-900 ); - color: var( - --highcontrast-actionbutton-content-color-down, - var( - --mod-actionbutton-content-color-down, - var(--spectrum-actionbutton-content-color-down) - ) + --mod-actionbutton-background-color-down-selected: var( + --spectrum-transparent-black-900 + ); + --mod-actionbutton-background-color-focus-selected: var( + --spectrum-transparent-black-900 + ); + --mod-actionbutton-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --mod-actionbutton-content-color-default: var(--spectrum-black); + --mod-actionbutton-content-color-hover: var(--spectrum-black); + --mod-actionbutton-content-color-down: var(--spectrum-black); + --mod-actionbutton-content-color-focus: var(--spectrum-black); + --mod-actionbutton-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --mod-actionbutton-content-color-default-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-hover-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-down-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-white) + ); + --mod-actionbutton-content-color-focus-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-white) + ); + --mod-actionbutton-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color ); } -:host([disabled]), -:host([disabled]) { - background-color: var( - --highcontrast-actionbutton-background-color-disabled, - var( - --mod-actionbutton-background-color-disabled, - var(--spectrum-actionbutton-background-color-disabled) - ) +:host([static-color='white']) { + --mod-actionbutton-background-color-default-selected: var( + --spectrum-transparent-white-800 ); - border-color: var( - --highcontrast-actionbutton-border-color-disabled, - var( - --mod-actionbutton-border-color-disabled, - var(--spectrum-actionbutton-border-color-disabled) - ) + --mod-actionbutton-background-color-hover-selected: var( + --spectrum-transparent-white-900 ); - color: var( - --highcontrast-actionbutton-content-color-disabled, - var( - --mod-actionbutton-content-color-disabled, - var(--spectrum-actionbutton-content-color-disabled) - ) + --mod-actionbutton-background-color-down-selected: var( + --spectrum-transparent-white-900 + ); + --mod-actionbutton-background-color-focus-selected: var( + --spectrum-transparent-white-900 + ); + --mod-actionbutton-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --mod-actionbutton-content-color-default: var(--spectrum-white); + --mod-actionbutton-content-color-hover: var(--spectrum-white); + --mod-actionbutton-content-color-down: var(--spectrum-white); + --mod-actionbutton-content-color-focus: var(--spectrum-white); + --mod-actionbutton-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --mod-actionbutton-content-color-default-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-black) + ); + --mod-actionbutton-content-color-hover-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-black) + ); + --mod-actionbutton-content-color-down-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-black) + ); + --mod-actionbutton-content-color-focus-selected: var( + --mod-actionbutton-static-content-color, + var(--spectrum-black) + ); + --mod-actionbutton-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color ); } :host([selected]) { --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected + --mod-actionbutton-background-color-default-selected, + var(--spectrum-actionbutton-background-color-selected) ); --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected + --mod-actionbutton-background-color-hover-selected, + var(--spectrum-actionbutton-background-color-selected-hover) ); --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected + --mod-actionbutton-background-color-down-selected, + var(--spectrum-actionbutton-background-color-selected-down) ); --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected + --mod-actionbutton-background-color-focus-selected, + var(--spectrum-actionbutton-background-color-selected-focus) + ); + --mod-actionbutton-background-color-disabled: var( + --spectrum-actionbutton-background-color-selected-disabled ); + --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-border-color-hover: transparent; + --mod-actionbutton-border-color-down: transparent; + --mod-actionbutton-border-color-focus: transparent; + --mod-actionbutton-border-color-disabled: transparent; --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected + --mod-actionbutton-content-color-default-selected, + var(--spectrum-actionbutton-content-color-selected) ); --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected + --mod-actionbutton-content-color-hover-selected, + var(--spectrum-actionbutton-content-color-selected) ); --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected + --mod-actionbutton-content-color-down-selected, + var(--spectrum-actionbutton-content-color-selected) ); --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected + --mod-actionbutton-content-color-focus-selected, + var(--spectrum-actionbutton-content-color-selected) ); } -:host([selected][emphasized]) { +@media (hover: hover) { + :host(:hover) { + --mod-actionbutton-background-color-default: var( + --mod-actionbutton-background-color-hover, + var(--spectrum-actionbutton-background-color-hover) + ); + --mod-actionbutton-border-color-default: var( + --mod-actionbutton-border-color-hover, + var(--spectrum-actionbutton-border-color-hover) + ); + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-content-color-hover, + var(--spectrum-neutral-content-color-hover) + ); + } +} + +:host(:focus-visible) { --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected-emphasized + --mod-actionbutton-background-color-focus, + var(--spectrum-actionbutton-background-color-focus) ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected-emphasized + --mod-actionbutton-border-color-default: var( + --mod-actionbutton-border-color-focus, + var(--spectrum-actionbutton-border-color-focus) ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected-emphasized + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-content-color-focus, + var(--spectrum-neutral-content-color-key-focus) ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected-emphasized +} + +:host(:is(:active, [active])) { + --mod-actionbutton-background-color-default: var( + --mod-actionbutton-background-color-down, + var(--spectrum-actionbutton-background-color-down) + ); + --mod-actionbutton-border-color-default: var( + --mod-actionbutton-border-color-down, + var(--spectrum-actionbutton-border-color-down) ); --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected-emphasized + --mod-actionbutton-content-color-down, + var(--spectrum-neutral-content-color-down) ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected-emphasized +} + +:host([disabled]), +:host([disabled]) { + --mod-actionbutton-background-color-default: var( + --mod-actionbutton-background-color-disabled, + var(--spectrum-actionbutton-background-color-disabled) ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected-emphasized + --mod-actionbutton-border-color-default: var( + --mod-actionbutton-border-color-disabled, + var(--spectrum-actionbutton-border-color-disabled) ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected-emphasized + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-content-color-disabled, + var(--spectrum-disabled-content-color) ); } -:host([selected][static-color='black']), -:host([selected][static-color='white']) { - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-static-content-color +:host, +:host { + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); + --spectrum-actionbutton-sized-icon-size: var( + --spectrum-workflow-icon-size-100 ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-static-content-color + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-sized-text-to-visual: var( + --spectrum-text-to-visual-100 ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-static-content-color + --spectrum-actionbutton-sized-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-static-content-color + --spectrum-actionbutton-sized-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --spectrum-actionbutton-sized-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-actionbutton-sized-edge-to-visual-only: var( + --spectrum-component-edge-to-visual-only-100 ); } -::slotted([slot='icon']) { - inline-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) +:host([size='xs']) { + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); + --spectrum-actionbutton-sized-icon-size: var( + --spectrum-workflow-icon-size-50 ); - block-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50); + --spectrum-actionbutton-sized-text-to-visual: var( + --spectrum-text-to-visual-50 ); - 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) - ) + --spectrum-actionbutton-sized-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small ); - 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) - ) + --spectrum-actionbutton-sized-edge-to-visual: var( + --spectrum-component-edge-to-visual-50 + ); + --spectrum-actionbutton-sized-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --spectrum-actionbutton-sized-edge-to-visual-only: var( + --spectrum-component-edge-to-visual-only-50 ); } -.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) - ) +:host([size='s']) { + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75); + --spectrum-actionbutton-sized-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-sized-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --spectrum-actionbutton-sized-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --spectrum-actionbutton-sized-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --spectrum-actionbutton-sized-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-actionbutton-sized-edge-to-visual-only: var( + --spectrum-component-edge-to-visual-only-75 ); } -#label { - pointer-events: none; - font-size: var( - --mod-actionbutton-font-size, - var(--spectrum-actionbutton-font-size) +:host([size='l']) { + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200); + --spectrum-actionbutton-sized-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-sized-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --spectrum-actionbutton-sized-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --spectrum-actionbutton-sized-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --spectrum-actionbutton-sized-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-actionbutton-sized-edge-to-visual-only: var( + --spectrum-component-edge-to-visual-only-200 ); - 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) - ) +:host([size='xl']) { + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300); + --spectrum-actionbutton-sized-icon-size: var( + --spectrum-workflow-icon-size-300 ); - 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) - ) + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-sized-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --spectrum-actionbutton-sized-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --spectrum-actionbutton-sized-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --spectrum-actionbutton-sized-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-actionbutton-sized-edge-to-visual-only: var( + --spectrum-component-edge-to-visual-only-300 ); } :host { + --spectrum-actionbutton-height: var( + --mod-actionbutton-height, + var(--spectrum-actionbutton-sized-height) + ); + --spectrum-actionbutton-icon-size: var( + --mod-actionbutton-icon-size, + var(--spectrum-actionbutton-sized-icon-size) + ); + --spectrum-actionbutton-font-size: var( + --mod-actionbutton-font-size, + var(--spectrum-actionbutton-sized-font-size) + ); + --spectrum-actionbutton-text-to-visual: var( + --mod-actionbutton-text-to-visual, + var(--spectrum-actionbutton-sized-text-to-visual) + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --mod-actionbutton-edge-to-hold-icon, + var(--spectrum-actionbutton-sized-edge-to-hold-icon) + ); + --spectrum-actionbutton-edge-to-visual: var( + --mod-actionbutton-edge-to-visual, + calc( + var(--spectrum-actionbutton-sized-edge-to-visual) - + var(--spectrum-actionbutton-border-width) + ) + ); + --spectrum-actionbutton-edge-to-text: var( + --mod-actionbutton-edge-to-text, + calc( + var(--spectrum-actionbutton-sized-edge-to-text) - + var(--spectrum-actionbutton-border-width) + ) + ); + --spectrum-actionbutton-edge-to-visual-only: var( + --mod-actionbutton-edge-to-visual-only, + calc( + var(--spectrum-actionbutton-sized-edge-to-visual-only) - + var(--spectrum-actionbutton-border-width) + ) + ); + min-inline-size: var( + --mod-actionbutton-min-width, + calc( + var( + --mod-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-sized-edge-to-visual-only) + ) * 2 + var(--spectrum-actionbutton-icon-size) + ) + ); + block-size: var(--spectrum-actionbutton-height); + border-radius: var(--spectrum-actionbutton-border-radius); + border-width: var(--spectrum-actionbutton-border-width); + gap: calc( + var(--spectrum-actionbutton-text-to-visual) + + var(--spectrum-actionbutton-edge-to-text) - + var(--spectrum-actionbutton-edge-to-visual-only) + ); + padding-inline: var(--spectrum-actionbutton-edge-to-text); + background-color: var(--spectrum-actionbutton-background-color); + border-color: var(--spectrum-actionbutton-border-color); + color: var(--spectrum-actionbutton-content-color); transition: border-color var( --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) + var(--spectrum-animation-duration-100) ) ease-in-out; + position: relative; } :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) - ) + var(--spectrum-actionbutton-focus-indicator-gap) + + var(--spectrum-actionbutton-border-width) ) * -1 ); border-radius: var( --mod-actionbutton-focus-indicator-border-radius, - var(--spectrum-actionbutton-focus-indicator-border-radius) + calc( + var(--spectrum-actionbutton-border-radius) + + var(--spectrum-actionbutton-focus-indicator-gap) + ) ); transition: box-shadow var( --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) + var(--spectrum-animation-duration-100) ) ease-in-out; pointer-events: none; @@ -514,16 +640,53 @@ governing permissions and limitations under the License. } :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(--spectrum-actionbutton-focus-indicator-thickness) + var(--spectrum-actionbutton-focus-indicator-color); +} + +::slotted([slot='icon']) { + inline-size: var(--spectrum-actionbutton-icon-size); + block-size: var(--spectrum-actionbutton-icon-size); + color: inherit; + margin-inline-start: calc( + var(--spectrum-actionbutton-edge-to-visual) - + var(--spectrum-actionbutton-edge-to-text) + ); + margin-inline-end: calc( + var(--spectrum-actionbutton-edge-to-visual-only) - + var(--spectrum-actionbutton-edge-to-text) + ); +} + +.hold-affordance + ::slotted([slot='icon']), +[icon-only]::slotted([slot='icon']) { + margin-inline-start: calc( + var(--spectrum-actionbutton-edge-to-visual-only) - + var(--spectrum-actionbutton-edge-to-text) + ); +} + +#label { + pointer-events: none; + line-height: var(--spectrum-actionbutton-height); + 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(--spectrum-actionbutton-edge-to-hold-icon) - + var(--spectrum-actionbutton-border-width) + ); + inset-inline-end: calc( + var(--spectrum-actionbutton-edge-to-hold-icon) - + var(--spectrum-actionbutton-border-width) + ); } diff --git a/packages/action-group/package.json b/packages/action-group/package.json index e796c08207..d3ab94c0e0 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/reactive-controllers": "^1.0.3" }, "devDependencies": { - "@spectrum-css/actiongroup": "6.0.0-s2-foundations.15" + "@spectrum-css/actiongroup": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css index 35cd126ebc..38efa5309f 100644 --- a/packages/action-group/src/action-group-overrides.css +++ b/packages/action-group/src/action-group-overrides.css @@ -21,64 +21,4 @@ --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='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 - ); -} - -: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 - ); } diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 462d1c72e2..59d7530684 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -11,6 +11,31 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-actiongroup-button-spacing-reset: 0; + --spectrum-actiongroup-border-radius-reset: 0; + --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); +} + +:host([size='s']), +:host([size='xs']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); +} + +:host([size='l']), +:host, +:host([size='xl']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); +} + :host { gap: var( --mod-actiongroup-horizontal-spacing-regular, @@ -28,7 +53,8 @@ governing permissions and limitations under the License. z-index: 3; } -:host(:not([vertical]):not([compact])) ::slotted(*) { +:host:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) + ::slotted(*) { flex-shrink: 0; } @@ -140,7 +166,7 @@ governing permissions and limitations under the License. z-index: 3; } -:host([compact]:not([quiet])[vertical]) { +:host([compact][vertical]:not([quiet])) { gap: var( --mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact) @@ -234,5 +260,5 @@ governing permissions and limitations under the License. } :host([justified]) ::slotted(*) { - flex: 1; + flex-grow: 1; } diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index 5f2ed1c36c..a89ec1c4ad 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/actionmenu": "7.0.0-s2-foundations.15" + "@spectrum-css/actionmenu": "^7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index bb7423ac14..b606f2d6a5 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/icons-workflow": "^1.0.3" }, "devDependencies": { - "@spectrum-css/alertbanner": "3.0.0-s2-foundations.16" + "@spectrum-css/alertbanner": "^3.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css index 9277a33b05..8ef9c34464 100644 --- a/packages/alert-banner/src/alert-banner-overrides.css +++ b/packages/alert-banner/src/alert-banner-overrides.css @@ -15,31 +15,4 @@ --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..49adfda622 100644 --- a/packages/alert-banner/src/spectrum-alert-banner.css +++ b/packages/alert-banner/src/spectrum-alert-banner.css @@ -12,6 +12,33 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --spectrum-alert-banner-size: auto; + --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); + --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); + --spectrum-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --spectrum-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --spectrum-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --spectrum-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --spectrum-alert-banner-font-color: var(--spectrum-white); --mod-divider-vertical-margin: var( --mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider) @@ -36,6 +63,7 @@ governing permissions and limitations under the License. var(--spectrum-alert-banner-close-button-spacing) ); --mod-closebutton-align-self: flex-start; + inline-size: auto; inline-size: var( --mod-alert-banner-size, var(--spectrum-alert-banner-size) @@ -58,10 +86,7 @@ governing permissions and limitations under the License. ); background-color: var( --mod-alert-banner-neutral-background, - var( - --mod-alert-banner-neutral-background, - var(--spectrum-alert-banner-neutral-background) - ) + var(--spectrum-alert-banner-neutral-background) ); border: 0 solid #0000; border: var(--highcontrast-alert-banner-border-width, 0) solid diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index 4e230e1757..4e3aff36c1 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -67,7 +67,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/alertdialog": "3.0.0-s2-foundations.15" + "@spectrum-css/alertdialog": "^3.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css index c9ac8a1f7e..a96590fd19 100644 --- a/packages/alert-dialog/src/spectrum-alert-dialog.css +++ b/packages/alert-dialog/src/spectrum-alert-dialog.css @@ -12,6 +12,52 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-alert-dialog-min-width: var( + --spectrum-alert-dialog-minimum-width + ); + --spectrum-alert-dialog-max-width: var( + --spectrum-alert-dialog-maximum-width + ); + --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --spectrum-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --spectrum-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --spectrum-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --spectrum-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --spectrum-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); + --spectrum-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --spectrum-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --spectrum-alert-dialog-body-color: var(--spectrum-body-color); + --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); --mod-buttongroup-justify-content: flex-end; box-sizing: border-box; inline-size: fit-content; diff --git a/packages/asset/package.json b/packages/asset/package.json index 10e4f4eb24..cab0209a5d 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/asset": "6.0.0-s2-foundations.15" + "@spectrum-css/asset": "^6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css index 41267b0876..d0eeef749b 100644 --- a/packages/asset/src/asset-overrides.css +++ b/packages/asset/src/asset-overrides.css @@ -12,9 +12,6 @@ /* 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 ); diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css index 06229170f6..9025be3562 100644 --- a/packages/asset/src/spectrum-asset.css +++ b/packages/asset/src/spectrum-asset.css @@ -12,6 +12,28 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-asset-folder-background: var( + --highcontrast-asset-icon-background-color, + var( + --mod-asset-folder-background-color, + var(--spectrum-asset-folder-background-color) + ) + ); + --spectrum-asset-file-background: var( + --highcontrast-asset-icon-background-color, + var( + --mod-asset-file-background-color, + var(--spectrum-asset-file-background-color) + ) + ); + --spectrum-asset-folder-outline: var( + --mod-asset-icon-outline-color, + var(--spectrum-asset-icon-outline-color) + ); + --spectrum-asset-file-outline: var( + --mod-asset-icon-outline-color, + var(--spectrum-asset-icon-outline-color) + ); inline-size: 100%; block-size: 100%; justify-content: center; @@ -23,7 +45,7 @@ governing permissions and limitations under the License. max-inline-size: 100%; max-block-size: 100%; object-fit: contain; - transition: opacity var(--spectrum-asset-transition-duration); + transition: opacity var(--spectrum-animation-duration-100); } .file, @@ -39,36 +61,23 @@ governing permissions and limitations under the License. } .folderBackground { - fill: var( - --highcontrast-asset-folder-background-color, - var( - --mod-asset-folder-background-color, - var(--spectrum-asset-folder-background-color) - ) - ); + fill: var(--spectrum-asset-folder-background); } .fileBackground { - fill: var( - --highcontrast-asset-file-background-color, - var( - --mod-asset-file-background-color, - var(--spectrum-asset-file-background-color) - ) - ); + fill: var(--spectrum-asset-file-background); } -.fileOutline, .folderOutline { - fill: var( - --mod-asset-icon-outline-color, - var(--spectrum-asset-icon-outline-color) - ); + fill: var(--spectrum-asset-folder-outline); +} + +.fileOutline { + fill: var(--spectrum-asset-file-outline); } @media (forced-colors: active) { :host { - --highcontrast-asset-folder-background-color: currentColor; - --highcontrast-asset-file-background-color: currentColor; + --highcontrast-asset-icon-background-color: currentColor; } } diff --git a/packages/avatar/package.json b/packages/avatar/package.json index eac9a7f065..dca1ea5a31 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/avatar": "8.0.0-s2-foundations.15" + "@spectrum-css/avatar": "^8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index 07aff46824..1b3243ea2f 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -11,6 +11,68 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-avatar-color-opacity: 1; + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + --spectrum-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); +} + +:host([size='50']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); +} + +:host([size='75']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); +} + +:host([size='100']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); +} + +:host([size='200']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); +} + +:host([size='300']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); +} + +:host([size='400']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); +} + +:host([size='500']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); +} + +:host([size='600']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); +} + +:host([size='700']) { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); +} + @media (forced-colors: active) { :host { --highcontrast-avatar-focus-indicator-color: CanvasText; @@ -18,7 +80,6 @@ governing permissions and limitations under the License. } :host { - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); inline-size: var( --mod-avatar-inline-size, var(--spectrum-avatar-inline-size) @@ -44,11 +105,8 @@ governing permissions and limitations under the License. :host([disabled]) { opacity: var( - --highcontrast-avatar-color-opacity-disabled, - var( - --mod-avatar-color-opacity-disabled, - var(--spectrum-avatar-color-opacity-disabled) - ) + --mod-avatar-color-opacity-disabled, + var(--spectrum-avatar-color-opacity-disabled) ); } diff --git a/packages/badge/package.json b/packages/badge/package.json index bea94e188c..614c9b409b 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/badge": "5.0.0-s2-foundations.15" + "@spectrum-css/badge": "^5.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css index a69ad6cec0..7f99b915d3 100644 --- a/packages/badge/src/spectrum-badge.css +++ b/packages/badge/src/spectrum-badge.css @@ -11,9 +11,196 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-badge-line-height: var(--spectrum-line-height-100); + --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-badge-label-icon-color: var(--spectrum-white); + --spectrum-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --spectrum-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --spectrum-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --spectrum-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --spectrum-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --spectrum-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --spectrum-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --spectrum-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --spectrum-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --spectrum-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --spectrum-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --spectrum-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --spectrum-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --spectrum-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --spectrum-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --spectrum-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --spectrum-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --spectrum-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --spectrum-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --spectrum-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --spectrum-badge-height: var(--spectrum-component-height-100); + --spectrum-badge-font-size: var(--spectrum-font-size-100); + --spectrum-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --spectrum-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --highcontrast-badge-border-color: CanvasText; +} + +:host([variant='celery']), +:host([variant='chartreuse']), +:host([variant='orange']), +:host([variant='yellow']) { + --spectrum-badge-label-icon-color: var(--spectrum-black); +} + +:host([variant='blue']), +:host([variant='cyan']), +:host([variant='fuchsia']), +:host([variant='gray']), +:host([variant='green']), +:host([variant='indigo']), +:host([variant='magenta']), +:host([variant='purple']), +:host([variant='red']), +:host([variant='seafoam']) { + --spectrum-badge-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); +} + +:host([size='s']) { + --spectrum-badge-height: var(--spectrum-component-height-75); + --spectrum-badge-font-size: var(--spectrum-font-size-75); + --spectrum-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); + --spectrum-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); +} + +:host([size='l']) { + --spectrum-badge-height: var(--spectrum-component-height-100); + --spectrum-badge-font-size: var(--spectrum-font-size-200); + --spectrum-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); + --spectrum-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); +} + +:host([size='xl']) { + --spectrum-badge-height: var(--spectrum-component-height-100); + --spectrum-badge-font-size: var(--spectrum-font-size-300); + --spectrum-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); + --spectrum-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); +} + @media (forced-colors: active) { :host { - border-color: CanvasText; + border-color: var(--highcontrast-badge-border-color); } } diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index ff65bb7a8b..a2ab9639b0 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -74,7 +74,7 @@ "@spectrum-web-components/menu": "^1.0.3" }, "devDependencies": { - "@spectrum-css/breadcrumb": "10.0.0-s2-foundations.15" + "@spectrum-css/breadcrumb": "^10.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/packages/breadcrumbs/src/spectrum-breadcrumbs.css index 1156522da0..1ee9d10200 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs.css @@ -11,6 +11,155 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --spectrum-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --spectrum-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --spectrum-breadcrumbs-font-weight-current: var( + --spectrum-bold-font-weight + ); + --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --spectrum-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --spectrum-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --spectrum-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --spectrum-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --spectrum-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --spectrum-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --spectrum-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --spectrum-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --spectrum-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --spectrum-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --spectrum-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --spectrum-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --spectrum-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --spectrum-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --spectrum-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --spectrum-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --spectrum-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --spectrum-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --spectrum-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --spectrum-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --spectrum-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --spectrum-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --spectrum-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --spectrum-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --spectrum-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --spectrum-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + @media (forced-colors: active) { :host { --highcontrast-breadcrumbs-text-color: LinkText; diff --git a/packages/button-group/package.json b/packages/button-group/package.json index 9c3c95e29c..01c38f6b14 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/button": "^1.0.3" }, "devDependencies": { - "@spectrum-css/buttongroup": "8.0.0-s2-foundations.15" + "@spectrum-css/buttongroup": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css index af5598e9f1..424b624ba0 100644 --- a/packages/button-group/src/spectrum-button-group.css +++ b/packages/button-group/src/spectrum-button-group.css @@ -12,25 +12,39 @@ 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) + --spectrum-buttongroup-spacing: var( + --mod-buttongroup-spacing, + var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300)) + ); + --spectrum-buttongroup-display: flex; + --spectrum-buttongroup-flex-direction: row; + --spectrum-buttongroup-justify-content: var( + --mod-buttongroup-justify-content, + normal ); - justify-content: normal; - justify-content: var(--mod-buttongroup-justify-content, normal); - flex-wrap: wrap; - display: flex; } -::slotted(*) { - flex-shrink: 0; +:host([size='s']) { + --spectrum-buttongroup-spacing: var( + --mod-buttongroup-spacing, + var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)) + ); } :host([vertical]) { - gap: var( - --mod-buttongroup-spacing-vertical, - var(--spectrum-buttongroup-spacing-vertical) - ); - flex-direction: column; - display: inline-flex; + --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical); + --spectrum-buttongroup-display: inline-flex; + --spectrum-buttongroup-flex-direction: column; +} + +:host { + display: var(--spectrum-buttongroup-display); + flex-direction: var(--spectrum-buttongroup-flex-direction); + gap: var(--spectrum-buttongroup-spacing); + justify-content: var(--spectrum-buttongroup-justify-content); + flex-wrap: wrap; +} + +::slotted(*) { + flex-shrink: 0; } diff --git a/packages/button/package.json b/packages/button/package.json index a40db71f51..54437b5ca8 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -93,7 +93,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/button": "14.0.0-s2-foundations.18" + "@spectrum-css/button": "^14.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css index f5827dcfef..25fee270d2 100644 --- a/packages/button/src/button-overrides.css +++ b/packages/button/src/button-overrides.css @@ -12,22 +12,6 @@ /* 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 ); @@ -50,1079 +34,335 @@ --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'][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'][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 + --mod-button-background-color-default: var( + --system-button-background-color-default ); - --spectrum-button-content-color-focus: var( - --system-button-negative-outline-content-color-focus + --mod-button-background-color-hover: var( + --system-button-background-color-hover ); - --spectrum-button-background-color-disabled: var( - --system-button-negative-outline-background-color-disabled + --mod-button-background-color-down: var( + --system-button-background-color-down ); - --spectrum-button-border-color-disabled: var( - --system-button-negative-outline-border-color-disabled + --mod-button-background-color-focus: var( + --system-button-background-color-focus ); - --spectrum-button-content-color-disabled: var( - --system-button-negative-outline-content-color-disabled + --mod-button-border-color-default: var( + --system-button-border-color-default ); + --mod-button-border-color-hover: var(--system-button-border-color-hover); + --mod-button-border-color-down: var(--system-button-border-color-down); + --mod-button-border-color-focus: var(--system-button-border-color-focus); } -: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 +:host([selected]) { + --mod-button-background-color-default: var( + --system-button-selected-background-color-default ); - --spectrum-button-background-color-disabled: var( - --system-button-primary-background-color-disabled + --mod-button-background-color-hover: var( + --system-button-selected-background-color-hover ); - --spectrum-button-border-color-disabled: var( - --system-button-primary-border-color-disabled + --mod-button-background-color-down: var( + --system-button-selected-background-color-down ); - --spectrum-button-content-color-disabled: var( - --system-button-primary-content-color-disabled + --mod-button-background-color-focus: var( + --system-button-selected-background-color-focus ); } :host([variant='primary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-primary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-primary-outline-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-primary-outline-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-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( + --mod-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 +} + +:host([variant='secondary']):not(.spectrum-Button--outline) { + --mod-button-background-color-hover: var( + --system-button-secondary-not-outline-background-color-hover ); - --spectrum-button-border-color-disabled: var( - --system-button-secondary-border-color-disabled + --mod-button-background-color-down: var( + --system-button-secondary-not-outline-background-color-down ); - --spectrum-button-content-color-disabled: var( - --system-button-secondary-content-color-disabled + --mod-button-background-color-focus: var( + --system-button-secondary-not-outline-background-color-focus ); } :host([variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-secondary-outline-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-secondary-outline-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-button-background-color-focus: var( --system-button-secondary-outline-background-color-focus ); - --spectrum-button-border-color-default: var( + --mod-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 - ); -} - -: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 - ); -} - -: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 - ); -} - -: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']) { - --spectrum-button-background-color-default: var( + --mod-button-background-color-default: var( --system-button-static-white-background-color-default ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-static-white-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-static-white-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-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( + --mod-button-content-color-default: var( --system-button-static-white-content-color-default ); - --spectrum-button-content-color-hover: var( + --mod-button-content-color-hover: var( --system-button-static-white-content-color-hover ); - --spectrum-button-content-color-down: var( + --mod-button-content-color-down: var( --system-button-static-white-content-color-down ); - --spectrum-button-content-color-focus: var( + --mod-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'][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( + --mod-button-background-color-default: var( --system-button-static-white-secondary-background-color-default ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-static-white-secondary-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-static-white-secondary-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-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( + --mod-button-content-color-default: var( --system-button-static-white-secondary-content-color-default ); - --spectrum-button-content-color-hover: var( + --mod-button-content-color-hover: var( --system-button-static-white-secondary-content-color-hover ); - --spectrum-button-content-color-down: var( + --mod-button-content-color-down: var( --system-button-static-white-secondary-content-color-down ); - --spectrum-button-content-color-focus: var( + --mod-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 +} + +:host([static-color='white'][variant='secondary'][treatment='outline']) { + --mod-button-border-color-default: var( + --system-button-static-white-secondary-outline-border-color-default ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-secondary-background-color-disabled + --mod-button-border-color-hover: var( + --system-button-static-white-secondary-outline-border-color-hover ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-border-color-disabled + --mod-button-border-color-down: var( + --system-button-static-white-secondary-outline-border-color-down ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-content-color-disabled + --mod-button-border-color-focus: var( + --system-button-static-white-secondary-outline-border-color-focus ); } -: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 +:host([static-color='white'][treatment='outline']):not( + .spectrum-Button--secondary + ) { + --mod-button-background-color-hover: var( + --system-button-static-white-outline-not-secondary-background-color-hover ); - --spectrum-button-background-color-down: var( - --system-button-static-white-secondary-outline-background-color-down + --mod-button-background-color-down: var( + --system-button-static-white-outline-not-secondary-background-color-down ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-secondary-outline-background-color-focus + --mod-button-background-color-focus: var( + --system-button-static-white-outline-not-secondary-background-color-focus ); - --spectrum-button-border-color-default: var( - --system-button-static-white-secondary-outline-border-color-default + --mod-button-content-color-default: var( + --system-button-static-white-outline-not-secondary-content-color-default ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-secondary-outline-border-color-hover + --mod-button-content-color-hover: var( + --system-button-static-white-outline-not-secondary-content-color-hover ); - --spectrum-button-border-color-down: var( - --system-button-static-white-secondary-outline-border-color-down + --mod-button-content-color-down: var( + --system-button-static-white-outline-not-secondary-content-color-down ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-secondary-outline-border-color-focus + --mod-button-content-color-focus: var( + --system-button-static-white-outline-not-secondary-content-color-focus ); - --spectrum-button-content-color-default: var( - --system-button-static-white-secondary-outline-content-color-default + --mod-button-border-color-default: var( + --system-button-static-white-outline-not-secondary-border-color-default ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-secondary-outline-content-color-hover + --mod-button-border-color-hover: var( + --system-button-static-white-outline-not-secondary-border-color-hover ); - --spectrum-button-content-color-down: var( - --system-button-static-white-secondary-outline-content-color-down + --mod-button-border-color-down: var( + --system-button-static-white-outline-not-secondary-border-color-down ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-secondary-outline-content-color-focus + --mod-button-border-color-focus: var( + --system-button-static-white-outline-not-secondary-border-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 +} + +:host([static-color='white'][treatment='outline'][variant='secondary']) { + --mod-button-background-color-hover: var( + --system-button-static-white-outline-secondary-background-color-hover ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-outline-border-color-disabled + --mod-button-background-color-down: var( + --system-button-static-white-outline-secondary-background-color-down ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-outline-content-color-disabled + --mod-button-background-color-focus: var( + --system-button-static-white-outline-secondary-background-color-focus ); } :host([static-color='black']) { - --spectrum-button-background-color-default: var( + --mod-button-background-color-default: var( --system-button-static-black-background-color-default ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-static-black-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-static-black-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-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( + --mod-button-content-color-default: var( --system-button-static-black-content-color-default ); - --spectrum-button-content-color-hover: var( + --mod-button-content-color-hover: var( --system-button-static-black-content-color-hover ); - --spectrum-button-content-color-down: var( + --mod-button-content-color-down: var( --system-button-static-black-content-color-down ); - --spectrum-button-content-color-focus: var( + --mod-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'][variant='secondary']) { - --spectrum-button-background-color-default: var( + --mod-button-background-color-default: var( --system-button-static-black-secondary-background-color-default ); - --spectrum-button-background-color-hover: var( + --mod-button-background-color-hover: var( --system-button-static-black-secondary-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-static-black-secondary-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-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( + --mod-button-content-color-default: var( --system-button-static-black-secondary-content-color-default ); - --spectrum-button-content-color-hover: var( + --mod-button-content-color-hover: var( --system-button-static-black-secondary-content-color-hover ); - --spectrum-button-content-color-down: var( + --mod-button-content-color-down: var( --system-button-static-black-secondary-content-color-down ); - --spectrum-button-content-color-focus: var( + --mod-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( + --mod-button-background-color-hover: var( --system-button-static-black-secondary-outline-background-color-hover ); - --spectrum-button-background-color-down: var( + --mod-button-background-color-down: var( --system-button-static-black-secondary-outline-background-color-down ); - --spectrum-button-background-color-focus: var( + --mod-button-background-color-focus: var( --system-button-static-black-secondary-outline-background-color-focus ); - --spectrum-button-border-color-default: var( + --mod-button-border-color-default: var( --system-button-static-black-secondary-outline-border-color-default ); - --spectrum-button-border-color-hover: var( + --mod-button-border-color-hover: var( --system-button-static-black-secondary-outline-border-color-hover ); - --spectrum-button-border-color-down: var( + --mod-button-border-color-down: var( --system-button-static-black-secondary-outline-border-color-down ); - --spectrum-button-border-color-focus: var( + --mod-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 +:host([static-color='black'][treatment='outline']):not( + .spectrum-Button--secondary + ) { + --mod-button-background-color-hover: var( + --system-button-static-black-outline-not-secondary-background-color-hover ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-s-edge-to-visual-only + --mod-button-background-color-down: var( + --system-button-static-black-outline-not-secondary-background-color-down ); - --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 + --mod-button-background-color-focus: var( + --system-button-static-black-outline-not-secondary-background-color-focus ); - --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 + --mod-button-content-color-default: var( + --system-button-static-black-outline-not-secondary-content-color-default ); - --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 + --mod-button-content-color-hover: var( + --system-button-static-black-outline-not-secondary-content-color-hover ); -} - -: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 + --mod-button-content-color-down: var( + --system-button-static-black-outline-not-secondary-content-color-down + ); + --mod-button-content-color-focus: var( + --system-button-static-black-outline-not-secondary-content-color-focus ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-m-edge-to-visual-only + --mod-button-border-color-default: var( + --system-button-static-black-outline-not-secondary-border-color-default ); - --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 + --mod-button-border-color-hover: var( + --system-button-static-black-outline-not-secondary-border-color-hover ); - --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 + --mod-button-border-color-down: var( + --system-button-static-black-outline-not-secondary-border-color-down ); - --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 + --mod-button-border-color-focus: var( + --system-button-static-black-outline-not-secondary-border-color-focus ); } -: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 +:host([static-color='black'][treatment='outline'][variant='secondary']) { + --mod-button-background-color-hover: var( + --system-button-static-black-outline-secondary-background-color-hover ); - --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 + --mod-button-background-color-down: var( + --system-button-static-black-outline-secondary-background-color-down ); - --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 + --mod-button-background-color-focus: var( + --system-button-static-black-outline-secondary-background-color-focus ); } diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 0fcd8d9ebf..a1613b524f 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -89,7 +89,10 @@ governing permissions and limitations under the License. :host:after { margin: calc( - -1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) + var( + --mod-button-focus-indicator-gap, + var(--spectrum-focus-indicator-gap) + ) * -1 ); transition: opacity @@ -97,10 +100,7 @@ governing permissions and limitations under the License. --mod-button-animation-duration, var( --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) + var(--spectrum-animation-duration-100) ) ) ease-out, @@ -109,10 +109,7 @@ governing permissions and limitations under the License. --mod-button-animation-duration, var( --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) + var(--spectrum-animation-duration-100) ) ) ease-out; @@ -135,202 +132,555 @@ governing permissions and limitations under the License. display: none; } +:host, :host { - --mod-progress-circle-position: absolute; - border-radius: var( - --mod-button-border-radius, - var(--spectrum-button-border-radius) + --spectrum-button-sized-height: var(--spectrum-component-height-100); + --spectrum-button-sized-font-size: var(--spectrum-font-size-100); + --spectrum-button-sized-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--spectrum-button-border-width) ); - border-width: var( - --mod-button-border-width, - var(--spectrum-button-border-width) + --spectrum-button-sized-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 ); - 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) + --spectrum-button-sized-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--spectrum-button-border-width) ); - 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) + --spectrum-button-sized-padding-label-to-icon: var( + --spectrum-text-to-visual-100 ); - 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) + --spectrum-button-sized-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --spectrum-button-sized-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --spectrum-button-sized-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-button-intended-icon-size: var( + --spectrum-workflow-icon-size-100 ); - 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; +:host([size='s']) { + --spectrum-button-sized-height: var(--spectrum-component-height-75); + --spectrum-button-sized-font-size: var(--spectrum-font-size-75); + --spectrum-button-sized-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--spectrum-button-border-width) + ); + --spectrum-button-sized-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --spectrum-button-sized-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--spectrum-button-border-width) + ); + --spectrum-button-sized-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --spectrum-button-sized-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --spectrum-button-sized-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --spectrum-button-sized-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); } -::slotted([slot='icon']) { - --_icon-size-difference: max( - 0px, - var(--spectrum-button-intended-icon-size) - - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)) +:host([size='l']) { + --spectrum-button-sized-height: var(--spectrum-component-height-200); + --spectrum-button-sized-font-size: var(--spectrum-font-size-200); + --spectrum-button-sized-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--spectrum-button-border-width) ); - 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) - ) + --spectrum-button-sized-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 ); - 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)) + --spectrum-button-sized-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--spectrum-button-border-width) + ); + --spectrum-button-sized-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --spectrum-button-sized-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --spectrum-button-sized-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --spectrum-button-sized-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-button-intended-icon-size: var( + --spectrum-workflow-icon-size-200 ); } -: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)) +:host([size='xl']) { + --spectrum-button-sized-height: var(--spectrum-component-height-300); + --spectrum-button-sized-font-size: var(--spectrum-font-size-300); + --spectrum-button-sized-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--spectrum-button-border-width) + ); + --spectrum-button-sized-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --spectrum-button-sized-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--spectrum-button-border-width) + ); + --spectrum-button-sized-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --spectrum-button-sized-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --spectrum-button-sized-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --spectrum-button-sized-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --spectrum-button-intended-icon-size: var( + --spectrum-workflow-icon-size-300 ); - border-radius: 50%; } -:host([icon-only]) ::slotted([slot='icon']) { - align-self: center; - margin-block-start: 0; - margin-inline-start: 0; +:host([selected]) { + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + --mod-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --mod-button-border-color-disabled: transparent; } -:host([icon-only]):after { - border-radius: 50%; +:host([selected][emphasized]), +:host([variant='accent']) { + --mod-button-background-color-default: var( + --spectrum-accent-background-color-default + ); + --mod-button-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --mod-button-background-color-down: var( + --spectrum-accent-background-color-down + ); + --mod-button-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); } -#label { - line-height: var( - --mod-button-line-height, - var(--spectrum-button-line-height) +:host([variant='accent']) { + --mod-button-background-color-disabled: var( + --spectrum-disabled-background-color ); - 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)) + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-border-color-disabled: transparent; + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); +} + +:host([variant='accent'][treatment='outline']) { + --mod-button-background-color-hover: var(--spectrum-accent-color-200); + --mod-button-background-color-down: var(--spectrum-accent-color-300); + --mod-button-background-color-focus: var(--spectrum-accent-color-200); + --mod-button-border-color-default: var(--spectrum-accent-color-900); + --mod-button-border-color-hover: var(--spectrum-accent-color-1000); + --mod-button-border-color-down: var(--spectrum-accent-color-1100); + --mod-button-border-color-focus: var(--spectrum-accent-color-1000); + --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); + --mod-button-content-color-default: var( + --spectrum-accent-content-color-default ); - 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)) + --mod-button-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --mod-button-content-color-down: var(--spectrum-accent-content-color-down); + --mod-button-content-color-focus: var( + --spectrum-accent-content-color-key-focus ); + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); } -[name='icon'] + #label { - text-align: start; - text-align: var(--mod-button-text-align-with-icon, start); +:host([variant='negative']) { + --mod-button-background-color-default: var( + --spectrum-negative-background-color-default + ); + --mod-button-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --mod-button-background-color-down: var( + --spectrum-negative-background-color-down + ); + --mod-button-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + --mod-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --mod-button-border-color-disabled: transparent; + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); } -: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([variant='negative'][treatment='outline']) { + --mod-button-background-color-hover: var(--spectrum-negative-color-200); + --mod-button-background-color-down: var(--spectrum-negative-color-300); + --mod-button-background-color-focus: var(--spectrum-negative-color-200); + --mod-button-border-color-default: var(--spectrum-negative-color-900); + --mod-button-border-color-hover: var(--spectrum-negative-color-1000); + --mod-button-border-color-down: var(--spectrum-negative-color-1100); + --mod-button-border-color-focus: var(--spectrum-negative-color-1000); + --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); + --mod-button-content-color-default: var( + --spectrum-negative-content-color-default + ); + --mod-button-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --mod-button-content-color-down: var( + --spectrum-negative-content-color-down + ); + --mod-button-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); } -:host { - transition: border-color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; +:host([variant='primary']) { + --mod-button-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --mod-button-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --mod-button-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --mod-button-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --mod-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-border-color-disabled: transparent; } -: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 +:host([variant='primary'][treatment='outline']) { + --mod-button-border-color-default: var(--spectrum-gray-800); + --mod-button-border-color-hover: var(--spectrum-gray-900); + --mod-button-border-color-down: var(--spectrum-gray-900); + --mod-button-border-color-focus: var(--spectrum-gray-900); + --mod-button-content-color-default: var( + --spectrum-neutral-content-color-default ); - 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) - ) - ) + --mod-button-content-color-hover: var( + --spectrum-neutral-content-color-hover ); - transition: box-shadow - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; - pointer-events: none; - content: ''; - position: absolute; - inset: 0; + --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); + --mod-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); } -:host(:focus-visible) { - box-shadow: none; - outline: none; +:host([variant='secondary']) { + --mod-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-border-color-disabled: transparent; + --mod-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --mod-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); + --mod-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); } -: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) - ) - ) - ); +:host([variant='secondary'][treatment='outline']) { + --mod-button-background-color-down: var(--spectrum-gray-400); + --mod-button-border-color-default: var(--spectrum-gray-300); + --mod-button-border-color-hover: var(--spectrum-gray-400); + --mod-button-border-color-down: var(--spectrum-gray-500); + --mod-button-border-color-focus: var(--spectrum-gray-400); + --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); + --mod-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --mod-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); + --mod-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); +} + +:host([quiet]) { + --mod-button-background-color-hover: var(--spectrum-gray-200); + --mod-button-background-color-down: var(--spectrum-gray-300); + --mod-button-background-color-focus: var(--spectrum-gray-200); +} + +:host([quiet]), +:host([static-color='black']), +:host([static-color='white']) { + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-border-color-disabled: transparent; +} + +:host([static-color='black'][selected]), +:host([static-color='white'][selected]) { + --mod-button-content-color-default: var(--mod-button-static-content-color); + --mod-button-content-color-hover: var(--mod-button-static-content-color); + --mod-button-content-color-down: var(--mod-button-static-content-color); + --mod-button-content-color-focus: var(--mod-button-static-content-color); + --mod-button-border-color-disabled: transparent; +} + +:host([static-color='black'][quiet]), +:host([static-color='black'][variant='secondary']), +:host([static-color='white'][quiet]), +:host([static-color='white'][variant='secondary']) { + --mod-button-border-color-default: transparent; + --mod-button-border-color-hover: transparent; + --mod-button-border-color-down: transparent; + --mod-button-border-color-focus: transparent; + --mod-button-border-color-disabled: transparent; +} + +:host([static-color='white']) { + --mod-button-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --mod-button-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --mod-button-focus-ring-color: var( + --spectrum-static-white-focus-indicator-color + ); +} + +:host([static-color='white'][variant='secondary']):not( + .spectrum-Button--outline + ) { + --mod-button-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); +} + +:host([static-color='white'][treatment='outline']) { + --mod-button-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --mod-button-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); +} + +:host([static-color='black']) { + --mod-button-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --mod-button-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --mod-button-focus-ring-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); +} + +:host([static-color='black'][variant='secondary']):not( + .spectrum-Button--outline + ) { + --mod-button-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); +} + +:host([static-color='black'][treatment='outline']) { + --mod-button-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --mod-button-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); +} + +:host([treatment='outline']), +:host([quiet]) { + --mod-button-background-color-default: transparent; + --mod-button-background-color-disabled: transparent; } :host { + --spectrum-button-height: var( + --mod-button-height, + var(--spectrum-button-sized-height) + ); + --spectrum-button-min-width: var( + --mod-button-min-width, + calc( + var(--spectrum-button-height) * + var(--spectrum-button-minimum-width-multiplier) + ) + ); + --spectrum-button-line-height: var(--mod-button-line-height, 1.2); + --spectrum-button-font-size: var( + --mod-button-font-size, + var(--spectrum-button-sized-font-size) + ); + --spectrum-button-padding-label-to-icon: var( + --mod-button-padding-label-to-icon, + var(--spectrum-button-sized-padding-label-to-icon) + ); + --spectrum-button-edge-to-visual: var( + --mod-button-edge-to-visual, + var(--spectrum-button-sized-edge-to-visual) + ); + --spectrum-button-edge-to-visual-only: var( + --mod-button-edge-to-visual-only, + var(--spectrum-button-sized-edge-to-visual-only) + ); + --spectrum-button-edge-to-text: var( + --mod-button-edge-to-text, + var(--spectrum-button-sized-edge-to-text) + ); + --spectrum-button-top-to-text: var( + --mod-button-top-to-text, + var(--spectrum-button-sized-top-to-text) + ); + --spectrum-button-bottom-to-text: var( + --mod-button-bottom-to-text, + var(--spectrum-button-sized-bottom-to-text) + ); + --spectrum-button-top-to-icon: var( + --mod-button-top-to-icon, + var(--spectrum-button-sized-top-to-icon) + ); + --spectrum-button-focus-ring-thickness: var( + --mod-button-focus-ring-thickness, + var(--spectrum-focus-indicator-thickness) + ); + --spectrum-button-focus-indicator-color: var( + --mod-button-focus-ring-color, + var(--spectrum-focus-indicator-color) + ); + --spectrum-button-animation-duration: var( + --mod-button-animation-duration, + var(--spectrum-animation-duration-100) + ); + --spectrum-button-border-width: var( + --mod-button-border-width, + var(--spectrum-border-width-200) + ); + --spectrum-button-focus-ring-gap: var( + --mod-focus-indicator-gap, + var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap)) + ); + --spectrum-button-border-radius: var( + --mod-button-border-radius, + calc(var(--spectrum-button-height) / 2) + ); + --spectrum-button-content-color-default: var( + --highcontrast-button-content-color-default, + var( + --mod-button-content-color-default, + var(--spectrum-neutral-content-color-default) + ) + ); + --spectrum-button-content-color-hover: var( + --highcontrast-button-content-color-hover, + var( + --mod-button-content-color-hover, + var(--spectrum-neutral-content-color-hover) + ) + ); + --spectrum-button-content-color-down: var( + --highcontrast-button-content-color-down, + var( + --mod-button-content-color-down, + var(--spectrum-neutral-content-color-down) + ) + ); + --spectrum-button-content-color-focus: var( + --highcontrast-button-content-color-focus, + var( + --mod-button-content-color-focus, + var(--spectrum-neutral-content-color-key-focus) + ) + ); + --spectrum-button-content-color-disabled: var( + --highcontrast-button-content-color-disabled, + var( + --mod-button-content-color-disabled, + var(--spectrum-disabled-content-color) + ) + ); + --mod-progress-circle-position: absolute; + border-radius: var(--spectrum-button-border-radius); + border-width: var(--spectrum-button-border-width); + font-size: var(--spectrum-button-font-size); + font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + gap: 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(--spectrum-button-min-width); + min-block-size: var(--spectrum-button-height); + padding-block: 0; + padding-inline: var(--spectrum-button-edge-to-text); + margin-block: var(--mod-button-margin-block); background-color: var( --highcontrast-button-background-color-default, var( @@ -338,6 +688,7 @@ governing permissions and limitations under the License. var(--spectrum-button-background-color-default) ) ); + border-style: solid; border-color: var( --highcontrast-button-border-color-default, var( @@ -345,41 +696,48 @@ governing permissions and limitations under the License. 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) - ) - ); + color: inherit; + color: var(--spectrum-button-content-color-default, inherit); 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; + border var(--spectrum-button-animation-duration, 0.13s) linear, + color var(--spectrum-button-animation-duration, 0.13s) linear, + background-color var(--spectrum-button-animation-duration, 0.13s) linear; + margin-inline-start: var(--mod-button-margin-left); + margin-inline-end: var(--mod-button-margin-right); + position: relative; +} + +:host([treatment='outline']) { + background-color: initial; +} + +:host:after { + margin: var( + --mod-button-focus-ring-border-radius, + calc( + ( + var(--spectrum-button-focus-ring-gap) + + var(--spectrum-button-border-width) + ) * -1 + ) + ); + transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out; + pointer-events: none; + content: ''; + border-radius: calc( + var(--spectrum-button-border-radius) + + var(--spectrum-focus-indicator-gap) + ); + position: absolute; + inset: 0; } @media (hover: hover) { :host(:hover) { - box-shadow: none; background-color: var( --highcontrast-button-background-color-hover, var( @@ -394,13 +752,8 @@ governing permissions and limitations under the License. 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) - ) - ); + color: var(--spectrum-button-content-color-hover); + box-shadow: none; } } @@ -419,13 +772,15 @@ governing permissions and limitations under the License. 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) - ) - ); + color: var(--spectrum-button-content-color-focus); + box-shadow: none; + outline: none; +} + +:host([focused]):after, +:host(:focus-visible):after { + box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) + var(--spectrum-button-focus-indicator-color); } :host(:is(:active, [active])) { @@ -443,13 +798,8 @@ governing permissions and limitations under the License. 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) - ) - ); + color: var(--spectrum-button-content-color-down); + box-shadow: none; } :host .is-disabled, @@ -470,13 +820,7 @@ governing permissions and limitations under the License. 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) - ) - ); + color: var(--spectrum-button-content-color-disabled); } #label, @@ -484,11 +828,7 @@ governing permissions and limitations under the License. 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) - ) + transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out; } @@ -499,17 +839,8 @@ governing permissions and limitations under the License. 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) - ); + opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out, + visibility 0s linear var(--spectrum-button-animation-duration, 0.13s); } :host([pending]), @@ -522,51 +853,83 @@ governing permissions and limitations under the License. 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) - ) + transition: opacity var(--spectrum-button-animation-duration, 0.13s) ease-in-out; } -:host([no-wrap]) #label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; +::slotted([slot='icon']) { + --_icon-size-difference: max( + 0px, + calc( + var(--spectrum-button-intended-icon-size) - + var( + --spectrum-icon-block-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, + calc( + var(--spectrum-button-top-to-icon) - + var(--spectrum-button-border-width) + + var(--_icon-size-difference, 0px) / 2 + ) + ) + ); + margin-inline-start: calc( + var(--spectrum-button-edge-to-visual) - + var(--spectrum-button-edge-to-text) + ); } -:host([static-color='white']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) +:host([icon-only]) { + min-inline-size: unset; + padding: calc( + var(--spectrum-button-edge-to-visual-only) - + var(--spectrum-button-border-width) ); + border-radius: 50%; } -: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) +:host([icon-only]) ::slotted([slot='icon']) { + align-self: center; + margin-block-start: 0; + margin-inline-start: 0; +} + +:host([icon-only]):after { + border-radius: 50%; +} + +[name='icon'] + #label { + text-align: start; + text-align: var(--mod-button-text-align-with-icon, start); +} + +#label { + 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(--spectrum-button-top-to-text) - var(--spectrum-button-border-width) ); - --spectrum-button-content-color-focus: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-focus) + padding-block-end: calc( + var(--spectrum-button-bottom-to-text) - + var(--spectrum-button-border-width) ); } -:host([static-color='black']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) - ); +:host([no-wrap]) #label { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } @media (forced-colors: active) { @@ -575,17 +938,17 @@ governing permissions and limitations under the License. --highcontrast-button-content-color-hover: ButtonText; --highcontrast-button-content-color-focus: ButtonText; --highcontrast-button-content-color-down: ButtonText; + --highcontrast-button-content-color-disabled: GrayText; --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-border-color-disabled: GrayText; --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( @@ -600,24 +963,23 @@ governing permissions and limitations under the License. :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; + box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText; + } + + :host([static-color='white'][variant='accent']) { + --highcontrast-button-content-color-disabled: GrayText; } :host([variant='accent'][treatment='fill']) { --highcontrast-button-background-color-default: ButtonText; + --highcontrast-button-background-color-hover: Highlight; + --highcontrast-button-background-color-down: Highlight; + --highcontrast-button-background-color-focus: Highlight; + --highcontrast-button-background-color-disabled: ButtonFace; --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; diff --git a/packages/card/package.json b/packages/card/package.json index 49bcc9d18f..265fbbcd46 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -67,7 +67,7 @@ "@spectrum-web-components/styles": "^1.0.3" }, "devDependencies": { - "@spectrum-css/card": "10.0.0-s2-foundations.20" + "@spectrum-css/card": "^10.0.0-s2-foundations.21" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css index e08c07aff1..47c9ec35be 100644 --- a/packages/card/src/card-overrides.css +++ b/packages/card/src/card-overrides.css @@ -12,90 +12,13 @@ /* 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 - ); } diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 8dde8d5e3e..1fd7bbebd9 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -12,25 +12,170 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-card-background-color: var( + --mod-card-background-color, + var(--spectrum-background-layer-2-color) + ); + --spectrum-card-body-spacing: var( + --mod-card-body-spacing, + var(--spectrum-spacing-400) + ); + --spectrum-card-body-padding-block-start: var( + --mod-card-body-padding-block-start, + var(--spectrum-spacing-300) + ); + --spectrum-card-title-padding-right: var( + --mod-card-title-padding-right, + var(--spectrum-spacing-400) + ); + --spectrum-card-content-margin-top: var( + --mod-card-content-margin-top, + var(--spectrum-spacing-100) + ); + --spectrum-card-content-margin-bottom: var( + --mod-card-content-margin-bottom, + var(--spectrum-spacing-300) + ); + --spectrum-card-footer-padding-top: var( + --mod-card-footer-padding-block-start, + var(--spectrum-spacing-100) + ); + --spectrum-card-subtitle-padding-right: var( + --mod-card-subtitle-padding-right, + var(--spectrum-spacing-100) + ); + --spectrum-card-border-width: var( + --mod-card-border-width, + var(--spectrum-border-width-100) + ); + --spectrum-card-corner-radius: var( + --mod-card-corner-radius, + var(--spectrum-corner-radius-100) + ); + --spectrum-card-border-color-selected: var( + --mod-card-border-color-selected, + var(--spectrum-blue-700) + ); + --spectrum-card-title-font-family: var( + --mod-card-title-font-family, + var(--spectrum-sans-font-family-stack) + ); + --spectrum-card-title-font-size: var( + --mod-card-title-font-size, + var(--spectrum-heading-size-xxs) + ); + --spectrum-card-title-font-weight: var( + --mod-card-title-font-weight, + var(--spectrum-heading-sans-serif-font-weight) + ); + --spectrum-card-title-font-style: var( + --mod-card-title-font-style, + var(--spectrum-heading-sans-serif-font-style) + ); + --spectrum-card-title-line-height: var( + --mod-card-title-line-height, + var(--spectrum-heading-line-height) + ); + --spectrum-card-title-font-color: var( + --mod-card-title-font-color, + var(--spectrum-heading-color) + ); + --spectrum-card-body-font-family: var( + --mod-card-body-font-family, + var(--spectrum-sans-font-family-stack) + ); + --spectrum-card-body-font-size: var( + --mod-card-body-font-size, + var(--spectrum-body-size-s) + ); + --spectrum-card-body-font-weight: var( + --mod-card-body-font-weight, + var(--spectrum-body-sans-serif-font-weight) + ); + --spectrum-card-body-font-style: var( + --mod-card-body-font-style, + var(--spectrum-body-sans-serif-font-style) + ); + --spectrum-card-body-line-height: var( + --mod-card-body-line-height, + var(--spectrum-body-line-height) + ); + --spectrum-card-body-font-color: var( + --mod-card-body-font-color, + var(--spectrum-body-color) + ); + --spectrum-card-actions-spacing: var( + --mod-card-actions-spacing, + var(--spectrum-spacing-300) + ); + --spectrum-card-actions-size: var( + --mod-card-actions-size, + var(--spectrum-card-selection-background-size) + ); + --spectrum-card-actions-border-radius: var( + --mod-card-actions-border-radius, + var(--spectrum-corner-radius-100) + ); + --spectrum-card-actions-background-color-rgb: var( + --mod-card-actions-background-color-rgb, + var(--spectrum-gray-100-rgb) + ); + --spectrum-card-actions-background-color-opacity: var( + --mod-card-actions-background-color-opacity, + var(--spectrum-card-selection-background-color-opacity) + ); + --spectrum-card-actions-drop-shadow-color: var( + --mod-card-actions-drop-shadow-color, + var(--spectrum-drop-shadow-color) + ); + --spectrum-card-actions-drop-shadow-x: var( + --mod-card-actions-drop-shadow-x, + var(--spectrum-drop-shadow-x) + ); + --spectrum-card-actions-drop-shadow-y: var( + --mod-card-actions-drop-shadow-y, + var(--spectrum-drop-shadow-y) + ); + --spectrum-card-actions-drop-shadow-blur: var( + --mod-card-actions-drop-shadow-blur, + var(--spectrum-drop-shadow-blur) + ); + --spectrum-card-focus-indicator-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-focus-indicator-color) + ); + --spectrum-card-focus-indicator-width: var( + --mod-card-focus-indicator-width, + var(--spectrum-focus-indicator-thickness) + ); + --spectrum-card-selected-background-opacity: var( + --mod-card-selected-background-opacity, + 0.1 + ); + --spectrum-card-preview-border-width-selected: var( + --mod-card-preview-border-width-selected, + var(--spectrum-border-width-100) + ); + --spectrum-card-horizontal-body-padding: var( + --mod-card-horizontal-body-padding, + var(--spectrum-spacing-300) + ); + --spectrum-card-horizontal-preview-padding: var( + --mod-card-horizontal-preview-padding, + var(--spectrum-spacing-200) + ); 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: var(--spectrum-card-border-width) solid transparent; + border-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)) + --mod-card-border-color, + var(--spectrum-card-border-color) ); + background-color: var(--spectrum-card-background-color); flex-direction: column; -webkit-text-decoration: none; text-decoration: none; @@ -38,6 +183,18 @@ governing permissions and limitations under the License. position: relative; } +:host([variant='quiet']) { + --mod-card-minimum-width: var(--mod-card-minimum-width-quiet); + --mod-card-content-margin-top: var( + --mod-card-content-margin-top-quiet, + var(--spectrum-spacing-100) + ); +} + +:host([variant='gallery']) { + --spectrum-card-content-margin-top: var(--spectrum-spacing-100); +} + :host:after, :host:before { content: ''; @@ -49,23 +206,10 @@ governing permissions and limitations under the License. } :host:after { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); + border-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 - ); + margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1); + margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1); inset-inline-end: 0; } @@ -74,42 +218,24 @@ governing permissions and limitations under the License. } :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) - ); + border-width: var(--spectrum-card-focus-indicator-width); + border-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) - ) + var(--spectrum-card-corner-radius) - + 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) - ) + var(--spectrum-card-corner-radius) - + 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) - ) - ); + --mod-card-border-color: var(--spectrum-card-border-color-selected); } :host([selected]):before { @@ -118,33 +244,14 @@ governing permissions and limitations under the License. --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) - ) + 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) - ); + --mod-card-background-color: var(--spectrum-background-base-color); + --mod-card-border-color: var(--spectrum-card-border-color-selected); + box-shadow: 0 0 0 1px var(--spectrum-card-border-color-selected); } :host([focused]) .actions, @@ -160,40 +267,16 @@ governing permissions and limitations under the License. .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) - ); + box-shadow: var(--spectrum-card-actions-drop-shadow-x) + var(--spectrum-card-actions-drop-shadow-y) + var(--spectrum-card-actions-drop-shadow-blur) + var(--spectrum-card-actions-drop-shadow-color); + inline-size: var(--spectrum-card-actions-size); + block-size: var(--spectrum-card-actions-size); + 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) - ) + var(--spectrum-card-actions-background-color-rgb), + var(--spectrum-card-actions-background-color-opacity) ); pointer-events: auto; box-sizing: border-box; @@ -224,24 +307,16 @@ governing permissions and limitations under the License. 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)) + var(--spectrum-card-actions-spacing) - 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)) + var(--spectrum-card-actions-spacing) - 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(--spectrum-card-actions-spacing); + inset-inline-end: var(--spectrum-card-actions-spacing); } #cover-photo { @@ -261,12 +336,10 @@ governing permissions and limitations under the License. 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)) + var(--spectrum-card-corner-radius) - 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)) + var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width) ); border-end-end-radius: 0; border-end-start-radius: 0; @@ -283,57 +356,39 @@ governing permissions and limitations under the License. .content { align-items: center; - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); + margin-block-start: 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-start: var(--spectrum-card-body-padding-block-start); 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)) + var(--spectrum-card-body-spacing) - + 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)) + var(--spectrum-card-body-spacing) - + 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)) + var(--spectrum-card-body-spacing) - + 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) - ); + color: var(--spectrum-card-body-font-color); + border-start-start-radius: var(--spectrum-card-corner-radius); + border-start-end-radius: var(--spectrum-card-corner-radius); border-end-end-radius: 0; border-end-start-radius: 0; align-items: center; @@ -342,128 +397,65 @@ governing permissions and limitations under the License. } .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(--spectrum-card-title-font-family); + font-size: var(--spectrum-card-title-font-size); + font-weight: var(--spectrum-card-title-font-weight); + font-style: var(--spectrum-card-title-font-style); + line-height: var(--spectrum-card-title-line-height); + color: var(--spectrum-card-title-font-color); + padding-inline-end: var(--spectrum-card-title-padding-right); } .subtitle { + color: var(--spectrum-card-title-font-color); text-transform: none; -} - -.subtitle, -.subtitle + ::slotted([slot='description']):before { - padding-inline-end: var( - --mod-card-subtitle-padding-right, - var(--spectrum-card-subtitle-padding-right) - ); + padding-inline-end: var(--spectrum-card-subtitle-padding-right); } .subtitle + ::slotted([slot='description']):before { content: '•'; + padding-inline-end: var(--spectrum-card-subtitle-padding-right); } ::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) - ); + font-family: var(--spectrum-card-body-font-family); + font-size: var(--spectrum-card-body-font-size); + font-weight: var(--spectrum-card-body-font-weight); + 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)) - ); + line-height: var(--spectrum-card-body-line-height); + 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)); + border-block-start: 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) - ) + var(--spectrum-card-body-spacing) - + 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)) + 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) - ) + var(--spectrum-card-body-spacing) ); + padding-block-start: 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)) + var(--spectrum-card-body-spacing) - + var(--spectrum-card-border-width) ) ); } @@ -476,17 +468,10 @@ governing permissions and limitations under the License. .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; + border: var(--spectrum-card-focus-indicator-width) solid transparent; } :host([variant='quiet'][focused]):after, @@ -496,40 +481,16 @@ governing permissions and limitations under the License. :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) - ); + border-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) - ) - ); + border: var(--spectrum-card-preview-border-width-selected) solid; + border-color: 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, @@ -549,10 +510,7 @@ governing permissions and limitations under the License. :host([variant='gallery']) #preview, :host([variant='quiet']) #preview { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); + border-radius: var(--spectrum-card-corner-radius); background-color: var( --mod-card-preview-background-color, var( @@ -595,25 +553,12 @@ governing permissions and limitations under the License. :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) - ) + var(--spectrum-card-corner-radius) + + 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 - ); + margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1); + margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1); inset-inline-end: 0; } @@ -638,15 +583,8 @@ governing permissions and limitations under the License. :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) - ); + border-color: var(--spectrum-card-focus-indicator-color); + box-shadow: 0 0 0 1px var(--spectrum-card-focus-indicator-color); } :host([variant='gallery'][selected]) #preview:before, @@ -665,10 +603,7 @@ governing permissions and limitations under the License. :host([variant='gallery']) .body, :host([variant='quiet']) .body { - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); + margin-block-start: var(--spectrum-card-content-margin-top); padding: 0; } @@ -683,12 +618,9 @@ governing permissions and limitations under the License. @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) - ) + --mod-card-border-color: var( + --mod-card-border-color-hover, + var(--spectrum-card-border-color-hover) ); } @@ -725,10 +657,7 @@ governing permissions and limitations under the License. :host([horizontal]) #preview { min-block-size: 0; - padding: var( - --mod-card-horizontal-preview-padding, - var(--spectrum-card-horizontal-preview-padding) - ); + padding: var(--spectrum-card-horizontal-preview-padding); background-color: var( --mod-card-preview-background-color, var(--spectrum-card-preview-background-color) @@ -738,14 +667,12 @@ governing permissions and limitations under the License. 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)) + var(--spectrum-card-corner-radius) - 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)) + var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width) ); flex-shrink: 0; justify-content: center; @@ -769,10 +696,7 @@ governing permissions and limitations under the License. :host([horizontal]) .body { padding-block: 0; - padding-inline: var( - --mod-card-horizontal-body-padding, - var(--spectrum-card-horizontal-body-padding) - ); + padding-inline: var(--spectrum-card-horizontal-body-padding); flex-direction: column; flex-shrink: 0; justify-content: center; diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 88f9e16bc8..e66204acb3 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -72,7 +72,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/checkbox": "10.0.0-s2-foundations.18" + "@spectrum-css/checkbox": "^10.0.0-s2-foundations.20" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css index 5bc06fba2e..bd28d22443 100644 --- a/packages/checkbox/src/checkbox-overrides.css +++ b/packages/checkbox/src/checkbox-overrides.css @@ -24,130 +24,8 @@ --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 { - --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='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..617903abdc 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -11,6 +11,120 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-checkbox-invalid-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-checkbox-invalid-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --spectrum-checkbox-invalid-color-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --spectrum-checkbox-emphasized-color-hover: var( + --spectrum-accent-color-1000 + ); + --spectrum-checkbox-emphasized-color-down: var( + --spectrum-accent-color-1100 + ); + --spectrum-checkbox-emphasized-color-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --spectrum-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --spectrum-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --spectrum-checkbox-line-height: var(--spectrum-line-height-100); + --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-checkbox-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-checkbox-border-width: var(--spectrum-border-width-200); + --spectrum-checkbox-selected-border-width: calc( + var(--spectrum-checkbox-control-size) / 2 + ); + --spectrum-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); +} + +:host, +:host { + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); +} + +:host([size='s']) { + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + --spectrum-checkbox-height: var(--spectrum-component-height-75); + --spectrum-checkbox-control-size: var( + --spectrum-checkbox-control-size-small + ); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); +} + +:host([size='l']) { + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + --spectrum-checkbox-height: var(--spectrum-component-height-200); + --spectrum-checkbox-control-size: var( + --spectrum-checkbox-control-size-large + ); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); +} + +:host([size='xl']) { + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + --spectrum-checkbox-height: var(--spectrum-component-height-300); + --spectrum-checkbox-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); +} + :host { color: var( --highcontrast-checkbox-content-color-default, @@ -79,24 +193,8 @@ governing permissions and limitations under the License. ); } -:host([readonly]) { - 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 { + cursor: default; } :host([readonly]) #input:checked:disabled + #box:before, @@ -119,7 +217,6 @@ governing permissions and limitations under the License. :host([readonly]) #input:checked:disabled ~ #label, :host([readonly]) #input:disabled ~ #label { - forced-color-adjust: none; color: var( --highcontrast-checkbox-color-default, var( @@ -248,7 +345,7 @@ governing permissions and limitations under the License. } :host([invalid][invalid]:hover) #box:before, - :host([invalid][invalid]:hover) #input:checked + #box:before { + :host([invalid][invalid]:hover) #input:checked + #box { border-color: var( --highcontrast-checkbox-color-hover, var( @@ -258,16 +355,6 @@ governing permissions and limitations under the License. ); } - :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( @@ -422,7 +509,7 @@ governing permissions and limitations under the License. box-sizing: border-box; inline-size: 100%; block-size: 100%; - opacity: 0.0001; + opacity: 0; z-index: 1; cursor: pointer; margin: 0; @@ -521,9 +608,6 @@ governing permissions and limitations under the License. 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 ) @@ -693,11 +777,8 @@ governing permissions and limitations under the License. ) ); outline-offset: var( - --highcontrast-checkbox-focus-indicator-gap, - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) + --mod-checkbox-focus-indicator-gap, + var(--spectrum-checkbox-focus-indicator-gap) ); outline-style: auto; outline-width: var( diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index d344ff325f..78fd532fa3 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -46,7 +46,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16" + "@spectrum-css/clearbutton": "^7.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index d2a1252c7b..4422aaac45 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -24,90 +24,16 @@ --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='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 .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 - ); } -: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 - ); +:host .spectrum-ClearButton--staticWhite { --spectrum-clear-button-background-color-hover: var( - --system-clear-button-over-background-background-color-hover + --system-clear-button-static-white-background-color-hover ); --spectrum-clear-button-background-color-down: var( - --system-clear-button-over-background-background-color-down + --system-clear-button-static-white-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 + --system-clear-button-static-white-background-color-key-focus ); } diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index 3eab7a51c9..ae986473f3 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -12,6 +12,23 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-clear-button-height: var(--spectrum-component-height-100); + --spectrum-clear-button-width: var(--spectrum-component-height-100); + --spectrum-clear-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --spectrum-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); block-size: var( --mod-clear-button-height, var(--spectrum-clear-button-height) @@ -20,7 +37,6 @@ governing permissions and limitations under the License. --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( @@ -36,13 +52,64 @@ governing permissions and limitations under the License. margin: 0; } +:host([size='s']) { + --spectrum-clear-button-height: var(--spectrum-component-height-75); + --spectrum-clear-button-width: var(--spectrum-component-height-75); +} + +:host([size='l']) { + --spectrum-clear-button-height: var(--spectrum-component-height-200); + --spectrum-clear-button-width: var(--spectrum-component-height-200); +} + +:host([size='xl']) { + --spectrum-clear-button-height: var(--spectrum-component-height-300); + --spectrum-clear-button-width: var(--spectrum-component-height-300); +} + +:host .spectrum-ClearButton--quiet { + --mod-clear-button-background-color: transparent; + --mod-clear-button-background-color-hover: transparent; + --mod-clear-button-background-color-down: transparent; + --mod-clear-button-background-color-key-focus: transparent; +} + +:host .spectrum-ClearButton--staticWhite { + --mod-clear-button-icon-color: var(--spectrum-white); + --mod-clear-button-icon-color-hover: var(--spectrum-white); + --mod-clear-button-icon-color-down: var(--spectrum-white); + --mod-clear-button-icon-color-key-focus: var(--spectrum-white); + --mod-clear-button-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --mod-clear-button-background-color: transparent; +} + +:host([disabled]), +:host([disabled]) { + --mod-clear-button-icon-color: var( + --mod-clear-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); + --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); + --mod-clear-button-background-color: var( + --mod-clear-button-background-color-disabled, + transparent + ); +} + +:host:not(:disabled) { + cursor: pointer; +} + .icon { margin-block: 0; margin-inline: auto; } @media (hover: hover) { - :host(:hover) { + :host:not(:disabled):hover { color: var( --highcontrast-clear-button-icon-color-hover, var( @@ -52,7 +119,7 @@ governing permissions and limitations under the License. ); } - :host(:hover) .fill { + :host:not(:disabled):hover .fill { background-color: var( --mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover) @@ -60,50 +127,42 @@ governing permissions and limitations under the License. } } -:host(:is(:active, [active])) { +:host(:is(:active, [active])):not(:disabled) { color: var( --mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down) ); } -:host(:is(:active, [active])) .fill { +:host(:is(:active, [active])):not(:disabled) .fill { 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 { +:host([focus-within]) .js-focus-within:not(:disabled), +:host:not(:disabled):focus-visible, +:host:not(:disabled):focus-within, +:host([focus-within]):not(:disabled).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 { +:host([focus-within]) .js-focus-within:not(:disabled) .fill, +:host:not(:disabled):focus-visible .fill, +:host:not(:disabled):focus-within .fill, +:host([focus-within]):not(:disabled).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 - ); +.spectrum-ClearButton-icon { + color: inherit; } .fill { @@ -119,7 +178,8 @@ governing permissions and limitations under the License. display: flex; } -:host([variant='overBackground']:focus-visible) { +:host([variant='overBackground']:focus-visible), +.spectrum-ClearButton--staticWhite:focus-visible { outline: none; } diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 23dd46bde0..7cc6e7c671 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -46,7 +46,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/closebutton": "6.0.0-s2-foundations.16" + "@spectrum-css/closebutton": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css index 005a7a6d0d..954c3b7cd9 100644 --- a/packages/close-button/src/close-button-overrides.css +++ b/packages/close-button/src/close-button-overrides.css @@ -24,40 +24,9 @@ --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 ); @@ -67,21 +36,9 @@ --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 ); @@ -91,29 +48,4 @@ --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 { - --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='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..0f673c2f41 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -136,12 +136,42 @@ governing permissions and limitations under the License. } :host { + --spectrum-closebutton-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-closebutton-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-closebutton-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-closebutton-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-closebutton-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-closebutton-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-closebutton-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-closebutton-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-closebutton-animation-duration: var( + --spectrum-animation-duration-100 + ); block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); + inline-size: var( + --mod-closebutton-width, + var(--mod-closebutton-height, var(--spectrum-closebutton-size)) + ); color: inherit; border-radius: var( --mod-closebutton-border-radius, - var(--spectrum-closebutton-size) + var(--spectrum-closebutton-border-radius) ); transition: border-color var( @@ -162,6 +192,49 @@ governing permissions and limitations under the License. position: relative; } +:host([size='s']) { + --spectrum-closebutton-size: var(--spectrum-component-height-75); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-75); +} + +:host, +:host { + --spectrum-closebutton-size: var(--spectrum-component-height-100); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-100); +} + +:host([size='l']) { + --spectrum-closebutton-size: var(--spectrum-component-height-200); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-200); +} + +:host([size='xl']) { + --spectrum-closebutton-size: var(--spectrum-component-height-300); + --spectrum-closebutton-border-radius: var(--spectrum-component-height-300); +} + +:host([static-color='white']) { + --spectrum-closebutton-static-background-color-default: transparent; + --spectrum-closebutton-icon-color-default: var(--spectrum-white); + --spectrum-closebutton-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --spectrum-closebutton-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); +} + +:host([static-color='black']) { + --spectrum-closebutton-static-background-color-default: transparent; + --spectrum-closebutton-icon-color-default: var(--spectrum-black); + --spectrum-closebutton-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --spectrum-closebutton-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); +} + :host:after { pointer-events: none; content: ''; @@ -322,11 +395,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-closebutton-static-background-color-hover, + var(--spectrum-closebutton-static-background-color-hover) ); } @@ -345,11 +415,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-closebutton-static-background-color-down, + var(--spectrum-closebutton-static-background-color-down) ); } @@ -369,11 +436,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-closebutton-static-background-color-focus, + var(--spectrum-closebutton-static-background-color-focus) ); } @@ -405,11 +469,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-closebutton-icon-color-disabled, + var(--spectrum-closebutton-icon-color-disabled) ); } diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index a828c6342c..d236b51f9f 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -82,8 +82,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/coachindicator": "3.0.0-s2-foundations.16", - "@spectrum-css/coachmark": "8.0.0-s2-foundations.17" + "@spectrum-css/coachindicator": "^3.0.0-s2-foundations.18", + "@spectrum-css/coachmark": "^8.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css index 7021ca01c8..5286c076c4 100644 --- a/packages/coachmark/src/spectrum-coach-indicator.css +++ b/packages/coachmark/src/spectrum-coach-indicator.css @@ -12,6 +12,38 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-coach-indicator-ring-border-size: var( + --spectrum-border-width-200 + ); + --spectrum-coach-indicator-sizing-multiple: 3; + --spectrum-coach-indicator-ring-diameter-size: var( + --mod-coach-indicator-ring-diameter, + var(--spectrum-coach-indicator-ring-diameter) + ); + --spectrum-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter-size) * + var(--spectrum-coach-indicator-sizing-multiple) + ); + --spectrum-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter-size) * + var(--spectrum-coach-indicator-sizing-multiple) + ); + --spectrum-coach-indicator-inline-size: var( + --mod-coach-indicator-inline-size, + var(--spectrum-coach-indicator-min-inline-size) + ); + --spectrum-coach-indicator-block-size: var( + --mod-coach-indicator-block-size, + var(--spectrum-coach-indicator-min-block-size) + ); + --spectrum-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --spectrum-coach-indicator-animation-keyframe-scale-initial: 1; + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var( + --mod-coach-indicator-inner-animation-delay-multiple, + -0.5 + ); margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); min-inline-size: var( --mod-coach-indicator-min-inline-size, @@ -21,66 +53,28 @@ governing permissions and limitations under the License. --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) - ); + inline-size: var(--spectrum-coach-indicator-inline-size); + 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( + --spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8; + --spectrum-coach-indicator-sizing-multiple: 2.75; + --spectrum-coach-indicator-ring-diameter-size: var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) + var(--spectrum-coach-indicator-quiet-ring-diameter) ); - --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( + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var( --mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, - var( - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple - ) + -0.33 ); } +:host .spectrum-CoachIndicator--staticWhite { + --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); +} + .ring { border-style: solid; border-width: var( @@ -93,16 +87,19 @@ governing permissions and limitations under the License. ); inline-size: var( --mod-coach-indicator-ring-inline-size, - var(--spectrum-coach-indicator-ring-inline-size) + var(--spectrum-coach-indicator-ring-diameter-size) ); block-size: var( --mod-coach-indicator-ring-block-size, - var(--spectrum-coach-indicator-ring-block-size) + var(--spectrum-coach-indicator-ring-diameter-size) ); - animation: var( - --mod-coach-indicator-animation-name, - var(--spectrum-coach-indicator-animation-name) + animation: pulse + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) ) + linear infinite; + animation: var(--mod-coach-indicator-animation-name, pulse) var( --mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration) @@ -113,11 +110,17 @@ governing permissions and limitations under the License. position: absolute; inset-block-start: var( --mod-coach-indicator-top, - var(--spectrum-coach-indicator-top) + calc( + var(--spectrum-coach-indicator-block-size) / 3 - + var(--spectrum-coach-indicator-ring-border-size) + ) ); inset-inline-start: var( --mod-coach-indicator-left, - var(--spectrum-coach-indicator-left) + calc( + var(--spectrum-coach-indicator-inline-size) / 3 - + var(--spectrum-coach-indicator-ring-border-size) + ) ); } @@ -127,14 +130,17 @@ governing permissions and limitations under the License. --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) - ) + var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple) ); } .ring:nth-child(2) { + animation-delay: calc( + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) + ) * -0.66 + ); animation-delay: calc( var( --mod-coach-animation-indicator-ring-duration, @@ -142,9 +148,7 @@ governing permissions and limitations under the License. ) * var( --mod-coach-animation-indicator-ring-center-delay-multiple, - var( - --spectrum-coach-animation-indicator-ring-center-delay-multiple - ) + -0.66 ) ); } @@ -154,27 +158,14 @@ governing permissions and limitations under the License. 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 - ) - ) + ) * -1 ); -} - -: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) + 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, -1) ); } @@ -187,45 +178,18 @@ governing permissions and limitations under the License. @keyframes pulse { 0% { transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-0-scale) + var(--spectrum-coach-indicator-animation-keyframe-scale-initial) ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + opacity: 0; } 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); + opacity: 1; + transform: scale(1.5); } to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + opacity: 0; + transform: scale(2); } } diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index 99446e29b8..42fe893650 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -12,61 +12,43 @@ 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 + --spectrum-coachmark-border-size: var( + --mod-coachmark-border-size, + var(--mod-popover-border-width) + ); + --spectrum-coachmark-border-radius: var( + --mod-coachmark-border-radius, + var(--mod-popover-corner-radius) ); + --mod-buttongroup-justify-content: flex-end; + --mod-popover-border-width: var(--spectrum-border-width-100); + --mod-popover-corner-radius: var(--spectrum-corner-radius-100); --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) + var(--spectrum-coach-mark-minimum-width) ); max-inline-size: var( --mod-coachmark-max-width, - var(--spectrum-coachmark-max-width) + var(--spectrum-coach-mark-maximum-width) ); - inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); + inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width)); position: relative; } -.buttongroup { - 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); -} - -.menu { - display: var(--spectrum-coachmark-menu-display); -} - -.spectrum-CoachMark-menu--mobile { - display: var(--spectrum-coachmark-menu-mobile-display); -} - .image-wrapper { block-size: var( --mod-coachmark-media-height, - var(--spectrum-coachmark-media-height) + var(--spectrum-coach-mark-media-height) ); min-block-size: var( --mod-coachmark-media-min-height, - var(--spectrum-coachmark-media-min-height) + var(--spectrum-coach-mark-media-minimum-height) ); inline-size: calc( - var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) * 2 + var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - + var(--spectrum-coachmark-border-size) * 2 ); object-fit: cover; object-position: center; @@ -79,24 +61,12 @@ governing permissions and limitations under the License. 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) - ) + var(--spectrum-coachmark-border-radius) - + 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) - ) + var(--spectrum-coachmark-border-radius) - + var(--spectrum-coachmark-border-size) ); display: block; } @@ -107,7 +77,7 @@ governing permissions and limitations under the License. padding-block: 0; padding-inline: var( --mod-coachmark-padding, - var(--spectrum-coachmark-padding) + var(--spectrum-coach-mark-edge-to-content) ); } @@ -116,52 +86,84 @@ governing permissions and limitations under the License. align-items: center; margin-block-end: var( --mod-coachmark-header-to-body, - var(--spectrum-coachmark-header-to-body) + var(--spectrum-spacing-200) ); padding-block-start: var( --mod-coachmark-padding, - var(--spectrum-coachmark-padding) + var(--spectrum-coach-mark-edge-to-content) ); display: flex; } +.title { + color: var(--mod-coachmark-title-color, var(--spectrum-heading-color)); + font-size: var( + --mod-coachmark-title-font-size, + var(--spectrum-coach-mark-title-size) + ); + font-weight: var( + --mod-coachmark-title-text-font-weight, + var(--spectrum-heading-sans-serif-font-weight) + ); + font-family: var( + --mod-coachmark-title-font-family, + var(--spectrum-sans-serif-font) + ); + font-style: var( + --mod-coachmark-title-font-style, + var(--spectrum-heading-serif-font-style) + ); + line-height: var( + --mod-coachmark-title-text-line-height, + var(--spectrum-heading-line-height) + ); + margin-block-end: 0; +} + .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) + var(--spectrum-spacing-300) ); } -.content { - color: var( - --mod-coachmark-content-font-color, - var(--spectrum-coachmark-content-font-color) +.menu { + display: var(--spectrum-coachmark-menu-display); +} + +.spectrum-CoachMark-menu--mobile { + --spectrum-coachmark-menu-display: var( + --spectrum-coachmark-menu-mobile-display ); +} + +.content { + color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color)); font-size: var( --mod-coachmark-content-font-size, - var(--spectrum-coachmark-content-font-size) + var(--spectrum-coach-mark-body-size) ); font-weight: var( --mod-coachmark-content-font-weight, - var(--spectrum-coachmark-content-font-weight) + var(--spectrum-body-sans-serif-font-weight) ); font-family: var( --mod-coachmark-content-font-family, - var(--spectrum-coachmark-content-font-family) + var(--spectrum-sans-serif-font) ); font-style: var( --mod-coachmark-content-font-style, - var(--spectrum-coachmark-content-font-style) + var(--spectrum-body-sans-serif-font-style) ); line-height: var( --mod-coachmark-content-line-height, - var(--spectrum-coachmark-content-line-height) + var(--spectrum-body-line-height) ); margin-block-end: var( --mod-coachmark-body-to-footer, - var(--spectrum-coachmark-body-to-footer) + var(--spectrum-spacing-300) ); } @@ -170,70 +172,55 @@ governing permissions and limitations under the License. margin-block-start: 0; padding-block-end: var( --mod-coachmark-padding, - var(--spectrum-coachmark-padding) + var(--spectrum-coach-mark-edge-to-content) ); display: grid; } -.footer .spectrum-ButtonGroup { - 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; -} - .step { color: var( --mod-coachmark-step-color, - var(--spectrum-coachmark-step-color) + var(--spectrum-coach-mark-pagination-color) ); font-size: var( --mod-coachmark-step-font-size, - var(--spectrum-coachmark-step-font-size) + var(--spectrum-coach-mark-pagination-body-size) ); font-weight: var( --mod-coachmark-step-text-font-weight, - var(--spectrum-coachmark-step-text-font-weight) + var(--spectrum-body-sans-serif-font-weight) ); + font-family: var(--spectrum-sans-serif-font); font-style: var( --mod-coachmark-step-font-style, - var(--spectrum-coachmark-step-font-style) + var(--spectrum-body-sans-serif-font-style) ); line-height: var( --mod-coachmark-step-text-line-height, - var(--spectrum-coachmark-step-text-line-height) + var(--spectrum-body-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)) + var(--spectrum-coach-mark-pagination-text-to-bottom-edge) + ) - + var( + --mod-coachmark-padding, + var(--spectrum-coach-mark-edge-to-content) + ) + ); +} + +.buttongroup { + display: var(--spectrum-coachmark-buttongroup-display); + grid-column-start: 2; +} + +.buttongroup-mobile { + --spectrum-coachmark-buttongroup-display: var( + --spectrum-coachmark-buttongroup-mobile-display ); + --mod-buttongroup-spacing: var(--spectrum-spacing-100); } diff --git a/packages/color-area/package.json b/packages/color-area/package.json index 41e5e98c14..77e3e9ec54 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorarea": "6.0.0-s2-foundations.15" + "@spectrum-css/colorarea": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css index d176f5b7b6..a45828203d 100644 --- a/packages/color-area/src/spectrum-color-area.css +++ b/packages/color-area/src/spectrum-color-area.css @@ -25,27 +25,33 @@ governing permissions and limitations under the License. } :host { + --spectrum-colorarea-border-color-rgb: 0, 0, 0; + --spectrum-colorarea-border-color-opacity: 0.1; + --spectrum-colorarea-border-color: rgba( + var(--spectrum-colorarea-border-color-rgb), + var(--spectrum-colorarea-border-color-opacity) + ); cursor: default; -webkit-user-select: none; user-select: none; min-inline-size: var( --mod-colorarea-min-width, - var(--spectrum-colorarea-min-width) + var(--spectrum-color-area-minimum-width) ); min-block-size: var( --mod-colorarea-min-height, - var(--spectrum-colorarea-min-height) + var(--spectrum-color-area-minimum-height) ); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + inline-size: var(--mod-colorarea-width, var(--spectrum-color-area-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-color-area-height)); box-sizing: border-box; border-radius: var( --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) + var(--spectrum-color-area-border-rounding) ); border: var( --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) + var(--spectrum-color-area-border-width) ) solid var( @@ -69,12 +75,12 @@ governing permissions and limitations under the License. --highcontrast-colorarea-fill-color-disabled, var( --mod-colorarea-disabled-background-color, - var(--spectrum-colorarea-disabled-background-color) + var(--spectrum-disabled-background-color) ) ); border: var( --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) + var(--spectrum-color-area-border-width) ) solid var(--highcontrast-colorarea-border-color-disabled); } @@ -86,8 +92,8 @@ governing permissions and limitations under the License. .handle { transform: translate( calc( - var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - - var(--spectrum-colorarea-border-width) + var(--mod-colorarea-width, var(--spectrum-color-area-width)) - + var(--spectrum-color-area-border-width) ) ); inset-block-start: 0; @@ -103,7 +109,7 @@ governing permissions and limitations under the License. block-size: 100%; border-radius: var( --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) + var(--spectrum-color-area-border-rounding) ); } diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index 2e50db474f..a8d1fde3f2 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/opacity-checkerboard": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorhandle": "9.0.0-s2-foundations.16" + "@spectrum-css/colorhandle": "^9.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 9ba6c9ad21..57ca356550 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -11,29 +11,45 @@ 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([disabled]) { + --highcontrast-colorhandle-border-color-disabled: GrayText; + --highcontrast-colorhandle-fill-color-disabled: Canvas; + } +} + :host { + --spectrum-colorhandle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --spectrum-colorhandle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --spectrum-colorhandle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); --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)); + inline-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size)); + block-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size)); margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 + var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2 * -1 ); margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 + var(--mod-colorhandle-size, var(--spectrum-color-handle-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) - ) + var(--spectrum-color-handle-border-width) ); + border-color: var(--mod-colorhandle-border-color, var(--spectrum-white)); box-shadow: 0 0 0 var( --mod-colorhandle-outer-border-width, @@ -46,12 +62,15 @@ governing permissions and limitations under the License. transition: all var( --mod-colorhandle-animation-duration, - var(--spectrum-colorhandle-animation-duration) + var(--spectrum-animation-duration-100) ) + ease-in-out; + transition: all var( - --mod-colorhandle-animation-easing, - var(--spectrum-colorhandle-animation-easing) - ); + --mod-colorhandle-animation-duration, + var(--spectrum-animation-duration-100) + ) + var(--mod-colorhandle-animation-easing, ease-in-out); border-style: solid; } @@ -68,23 +87,23 @@ governing permissions and limitations under the License. 50% - var( --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) + var(--spectrum-color-control-track-width) ) / 2 ); inset-block: calc( 50% - var( --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) + var(--spectrum-color-control-track-width) ) / 2 ); inline-size: var( --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) + var(--spectrum-color-control-track-width) ); block-size: var( --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) + var(--spectrum-color-control-track-width) ); border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); } @@ -93,17 +112,17 @@ governing permissions and limitations under the License. :host(:focus-visible) { inline-size: var( --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) + var(--spectrum-color-handle-size-key-focus) ); block-size: var( --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) + var(--spectrum-color-handle-size-key-focus) ); margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 + var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) * -1 ); margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 + var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) * -1 ); outline: none; } @@ -114,14 +133,14 @@ governing permissions and limitations under the License. --highcontrast-colorhandle-border-color-disabled, var( --mod-colorhandle-border-color-disabled, - var(--spectrum-colorhandle-border-color-disabled) + var(--spectrum-disabled-content-color) ) ); background: var( --highcontrast-colorhandle-fill-color-disabled, var( --mod-colorhandle-fill-color-disabled, - var(--spectrum-colorhandle-fill-color-disabled) + var(--spectrum-disabled-background-color) ) ); box-shadow: none; @@ -137,7 +156,7 @@ governing permissions and limitations under the License. box-shadow: inset 0 0 0 var( --mod-colorhandle-inner-border-width, - var(--spectrum-colorhandle-inner-border-width) + var(--spectrum-color-handle-inner-border-width) ) var( --mod-colorhandle-inner-border-color, @@ -146,14 +165,3 @@ governing permissions and limitations under the License. background-color: var(--spectrum-picked-color); border-radius: 100%; } - -@media (forced-colors: active) { - :host { - forced-color-adjust: none; - } - - :host([disabled]) { - --highcontrast-colorhandle-border-color-disabled: GrayText; - --highcontrast-colorhandle-fill-color-disabled: Canvas; - } -} diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index dcb1303da7..054c944753 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorloupe": "6.0.0-s2-foundations.15" + "@spectrum-css/colorloupe": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css index 2bac5afc52..5400f142be 100644 --- a/packages/color-loupe/src/spectrum-color-loupe.css +++ b/packages/color-loupe/src/spectrum-color-loupe.css @@ -12,33 +12,26 @@ 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) - ) - ); + inline-size: var(--spectrum-color-loupe-width); + block-size: var(--spectrum-color-loupe-height); + transform: translateY(8px); + transform: translateY(var(--mod-colorloupe-animation-distance, 8px)); 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-x, var(--spectrum-drop-shadow-x)) var( --mod-colorloupe-drop-shadow-y, - var(--spectrum-colorloupe-drop-shadow-y) + var(--spectrum-color-loupe-drop-shadow-y) ) var( --mod-colorloupe-drop-shadow-blur, - var(--spectrum-colorloupe-drop-shadow-blur) + var(--spectrum-color-loupe-drop-shadow-blur) ) var( --mod-colorloupe-drop-shadow-color, - var(--spectrum-colorloupe-drop-shadow-color) + var(--spectrum-color-loupe-drop-shadow-color) ) ); transition: @@ -48,14 +41,17 @@ governing permissions and limitations under the License. inset-block-end: calc( var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + - var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)) + var( + --mod-colorloupe-offset, + var(--spectrum-color-loupe-bottom-to-color-handle) + ) ); - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2); + inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2); } :host:dir(rtl), :host([dir='rtl']) { - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 - 1px); + inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px); } :host([open]) { @@ -67,11 +63,11 @@ governing permissions and limitations under the License. fill: var(--spectrum-picked-color); stroke: var( --mod-colorloupe-inner-border-color, - var(--spectrum-colorloupe-inner-border-color) + var(--spectrum-color-loupe-inner-border) ); stroke-width: var( --mod-colorloupe-inner-border-width, - var(--spectrum-colorloupe-inner-border-width) + var(--spectrum-color-loupe-inner-border-width) ); } @@ -81,23 +77,23 @@ governing permissions and limitations under the License. --highcontrast-colorloupe-outer-border-color, var( --mod-colorloupe-outer-border-color, - var(--spectrum-colorloupe-outer-border-color) + var(--spectrum-color-loupe-outer-border) ) ); stroke-width: calc( var( --mod-colorloupe-outer-border-width, - var(--spectrum-colorloupe-outer-border-width) + var(--spectrum-color-loupe-outer-border-width) ) + 2px ); } .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-colorloupe-checkerboard-dark-color); + fill: var(--spectrum-opacity-checkerboard-square-dark); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-colorloupe-checkerboard-light-color); + fill: var(--spectrum-opacity-checkerboard-square-light); } .spectrum-ColorLoupe-checkerboard-fill { diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index c9e2bb1d00..ca8728de13 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorslider": "7.0.0-s2-foundations.16" + "@spectrum-css/colorslider": "^7.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css index ec2a9d54b1..1e4027b123 100644 --- a/packages/color-slider/src/spectrum-color-slider.css +++ b/packages/color-slider/src/spectrum-color-slider.css @@ -21,6 +21,10 @@ governing permissions and limitations under the License. } :host { + --spectrum-color-slider-border-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); --mod-colorhandle-hitarea-border-radius: var( --mod-color-slider-handle-hitarea-border-radius, 0px @@ -94,7 +98,7 @@ governing permissions and limitations under the License. --highcontrast-color-slider-border-color, var( --mod-color-slider-border-color, - var(--spectrum-color-slider-border-color-rgba) + var(--spectrum-color-slider-border-color-default) ) ); } diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index 4ce911c1b6..8984616bd3 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/colorwheel": "5.0.0-s2-foundations.15" + "@spectrum-css/colorwheel": "^5.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css index cf779adff3..0b33a99bcc 100644 --- a/packages/color-wheel/src/color-wheel-overrides.css +++ b/packages/color-wheel/src/color-wheel-overrides.css @@ -12,19 +12,5 @@ /* 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 - ); } diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css index 3a3d9ffb04..e0b44173b0 100644 --- a/packages/color-wheel/src/spectrum-color-wheel.css +++ b/packages/color-wheel/src/spectrum-color-wheel.css @@ -20,20 +20,34 @@ governing permissions and limitations under the License. } :host { - --_track-width: var( - --mod-colorwheel-track-width, - var(--spectrum-colorwheel-track-width) + --spectrum-colorwheel-width: var( + --mod-colorwheel-width, + var(--spectrum-color-wheel-width) + ); + --spectrum-colorwheel-height: var( + --mod-colorwheel-height, + var(--spectrum-color-wheel-width) + ); + --spectrum-colorwheel-fill-color-disabled: var( + --mod-colorwheel-fill-color-disabled, + var(--spectrum-disabled-background-color) ); - --_border-width: var( + --spectrum-colorwheel-border-width: var( --mod-colorwheel-border-width, - var(--spectrum-colorwheel-border-width) + var(--spectrum-border-width-100) ); + --spectrum-colorwheel-track-width: var( + --mod-colorwheel-track-width, + var(--spectrum-color-control-track-width) + ); + --_track-width: var(--spectrum-colorwheel-track-width); + --_border-width: var(--spectrum-colorwheel-border-width); min-inline-size: var( --mod-colorwheel-min-width, - var(--spectrum-colorwheel-min-width) + var(--spectrum-color-wheel-minimum-width) ); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + inline-size: var(--spectrum-colorwheel-width); + block-size: var(--spectrum-colorwheel-height); -webkit-user-select: none; user-select: none; cursor: default; @@ -74,7 +88,7 @@ governing permissions and limitations under the License. inline-size: 100%; margin: var( --mod-colorwheel-colorarea-margin, - var(--spectrum-colorwheel-colorarea-margin) + var(--spectrum-color-wheel-color-area-margin) ); justify-content: center; align-items: center; @@ -94,7 +108,12 @@ governing permissions and limitations under the License. } .handle { - transform: translate(var(--spectrum-colorwheel-colorhandle-position)); + transform: translate( + calc( + var(--spectrum-colorwheel-width) / 2 - + var(--spectrum-colorwheel-track-width) / 2 + ) + ); inset-block-start: 50%; inset-inline: 50%; } @@ -104,8 +123,8 @@ governing permissions and limitations under the License. --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)); + inline-size: var(--spectrum-colorwheel-width); + block-size: var(--spectrum-colorwheel-height); clip-path: path( evenodd, var( @@ -119,10 +138,7 @@ governing permissions and limitations under the License. :host([disabled]) .border { background-color: var( --highcontrast-colorwheel-border-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) + var(--spectrum-colorwheel-fill-color-disabled) ); } @@ -156,9 +172,6 @@ governing permissions and limitations under the License. pointer-events: none; background: var( --highcontrast-colorwheel-fill-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) + var(--spectrum-colorwheel-fill-color-disabled) ); } diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 1c96fda623..d53b89c120 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -70,7 +70,7 @@ "@spectrum-web-components/textfield": "^1.0.3" }, "devDependencies": { - "@spectrum-css/combobox": "4.0.0-s2-foundations.18" + "@spectrum-css/combobox": "^4.0.0-s2-foundations.21" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css index d89e93ae3d..03addea8de 100644 --- a/packages/combobox/src/combobox-overrides.css +++ b/packages/combobox/src/combobox-overrides.css @@ -27,225 +27,7 @@ --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 { - --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='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 - ); -} - -: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 - ); -} - -: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 + --spectrum-combobox-background-color-disabled: var( + --system-combobox-background-color-disabled ); } diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index 7c2285c886..68f412effc 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -11,28 +11,71 @@ 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 { - --spectrum-combobox-button-inline-offset: 0px; + --spectrum-combobox-inline-size: var(--spectrum-field-width); + --spectrum-combobox-block-size: var(--spectrum-component-height-100); --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * + var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size) ); --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-combobox-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); + --spectrum-combobox-border-width: var(--spectrum-border-width-100); + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component + ); + --spectrum-combobox-font-style: var(--spectrum-default-font-style); + --spectrum-combobox-line-height: var(--spectrum-line-height-100); + --spectrum-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --spectrum-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); --mod-textfield-focus-indicator-gap: var( --mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap) @@ -49,7 +92,8 @@ governing permissions and limitations under the License. --mod-combobox-background-color-default ); --mod-textfield-background-color-disabled: var( - --mod-combobox-background-color-disabled + --mod-combobox-background-color-disabled, + var(--spectrum-combobox-background-color-disabled) ); --mod-textfield-font-family: var(--mod-combobox-font-family); --mod-textfield-font-weight: var(--mod-combobox-font-weight); @@ -130,6 +174,208 @@ governing permissions and limitations under the License. --mod-picker-button-font-color-disabled: var( --mod-combobox-font-color-disabled ); + --spectrum-combobox-readonly-input-background-color: var( + --spectrum-gray-50 + ); + --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); + --spectrum-combobox-readonly-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-combobox-readonly-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-combobox-readonly-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-combobox-border-color-disabled: var( + --spectrum-disabled-border-color + ); +} + +:host, +:host { + --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); +} + +:host([size='s']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-75); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-combobox-font-size: var(--spectrum-font-size-75); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); +} + +:host([size='l']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-200); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-combobox-font-size: var(--spectrum-font-size-200); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); +} + +:host([size='xl']) { + --spectrum-combobox-block-size: var(--spectrum-component-height-300); + --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-combobox-font-size: var(--spectrum-font-size-300); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); +} + +:host([quiet]) { + --spectrum-combobox-min-inline-size: calc( + var(--spectrum-combo-box-quiet-minimum-width-multiplier) * + var(--spectrum-combobox-block-size) + ); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-medium + ); + --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 + ); + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; +} + +:host([quiet][size='s']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-small + ); +} + +:host([quiet]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-medium + ); +} + +:host([quiet][size='l']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-large + ); +} + +:host([quiet][size='xl']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --spectrum-field-label-to-component-quiet-extra-large + ); +} + +@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 { inline-size: var( --mod-combobox-inline-size, var(--spectrum-combobox-inline-size) @@ -164,6 +410,45 @@ governing permissions and limitations under the License. ); } +:host([keyboard-focused]) + .is-readOnly:not(.spectrum-Combobox--quiet) + #textfield + #input { + outline-offset: var(--mod-textfield-focus-indicator-gap); + outline: var(--mod-textfield-focus-indicator-width) solid; + outline-color: var(--mod-textfield-focus-indicator-color); +} + +:host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + background-color: var(--spectrum-combobox-readonly-input-background-color); + border-color: var(--spectrum-combobox-readonly-input-border-color); +} + +:host([invalid]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + border-color: var( + --highcontrast-textfield-border-color-invalid-default, + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-combobox-readonly-border-color-invalid-default) + ) + ); +} + +:host([disabled]) .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only { + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-combobox-readonly-background-color-disabled) + ); + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-combobox-readonly-text-color-disabled) + ) + ); + border-color: #0000; +} + .progress-circle { position: absolute; inset-block-start: var( @@ -206,7 +491,7 @@ governing permissions and limitations under the License. inset-inline-end: calc( var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) * -1 ); } @@ -379,12 +664,28 @@ governing permissions and limitations under the License. #input:focus, :host([focused]) #textfield #input { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-focus + ); --mod-textfield-background-color: var( --mod-combobox-background-color-focus ); } @media (hover: hover) { + :host .is-readOnly:not(.spectrum-Combobox--quiet) #input:read-only:hover { + background-color: revert; + } + + :host([disabled]) + .is-readOnly:not(.spectrum-Combobox--quiet) + #input:read-only:hover { + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-combobox-readonly-background-color-disabled) + ); + } + .button:not(:disabled, .is-invalid, [quiet]):hover, :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( @@ -453,6 +754,9 @@ governing permissions and limitations under the License. #input:focus:hover, :host([focused]) #textfield #input:hover { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-focus-hover + ); --mod-textfield-background-color: var( --mod-combobox-background-color-focus-hover ); @@ -460,6 +764,9 @@ governing permissions and limitations under the License. } :host([keyboard-focused]) #textfield #input { + --mod-combobox-border-color-default: var( + --spectrum-combobox-border-color-key-focus + ); --mod-textfield-background-color: var( --mod-combobox-background-color-key-focus ); @@ -480,7 +787,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) - var( --mod-combobox-border-width, @@ -525,21 +832,7 @@ governing permissions and limitations under the License. } :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 - ); + border-radius: 0; } :host([quiet][invalid]) #textfield .icon { @@ -549,6 +842,42 @@ governing permissions and limitations under the License. ); } +:host([quiet]) #textfield.is-readOnly #input:read-only { + border-block-end: var( + --mod-combobox-border-width, + var(--spectrum-combobox-border-width) + ) + solid + var( + --mod-combobox-readonly-input-border-color, + var(--spectrum-combobox-readonly-input-border-color) + ); +} + +:host([quiet][invalid]) #textfield.is-readOnly > #input:read-only { + border-color: var( + --highcontrast-textfield-border-color-invalid-default, + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-combobox-readonly-border-color-invalid-default) + ) + ); +} + +:host([quiet][disabled]) #textfield.is-readOnly #input:read-only { + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-combobox-readonly-text-color-disabled) + ) + ); + border-color: var( + --mod-textfield-border-color-disabled, + var(--spectrum-combobox-border-color-disabled) + ); +} + :host([quiet]) #input { border-block-end-width: var( --mod-combobox-border-width, @@ -580,7 +909,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) ); } @@ -600,7 +929,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) + var(--spectrum-combobox-button-inline-offset, 0px) ) ); } diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index 829e603b84..21bb860bb2 100644 --- a/packages/contextual-help/package.json +++ b/packages/contextual-help/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/popover": "^1.0.3" }, "devDependencies": { - "@spectrum-css/contextualhelp": "4.0.0-s2-foundations.16" + "@spectrum-css/contextualhelp": "^4.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/contextual-help/src/spectrum-contextual-help.css b/packages/contextual-help/src/spectrum-contextual-help.css index 76b2ff53b2..bc248b06b4 100644 --- a/packages/contextual-help/src/spectrum-contextual-help.css +++ b/packages/contextual-help/src/spectrum-contextual-help.css @@ -18,11 +18,11 @@ governing permissions and limitations under the License. ); padding-block: var( --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) + var(--spectrum-spacing-400) ); padding-inline: var( --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) + var(--spectrum-spacing-400) ); font-size: var( --mod-spectrum-contextual-help-body-size, @@ -30,10 +30,7 @@ governing permissions and limitations under the License. ); color: var( --highcontrast-contextual-help-body-color, - var( - --mod-contextual-help-body-color, - var(--spectrum-contextual-help-body-color) - ) + var(--mod-contextual-help-body-color, var(--spectrum-body-color)) ); position: relative; } @@ -46,14 +43,11 @@ governing permissions and limitations under the License. .popover ::slotted([slot='heading']) { font-size: var( --mod-spectrum-contextual-help-heading-size, - var(--spectrum-contextual-help-heading-size) + var(--spectrum-contextual-help-title-size) ); color: var( --highcontrast-contextual-help-heading-color, - var( - --mod-contextual-help-heading-color, - var(--spectrum-contextual-help-heading-color) - ) + var(--mod-contextual-help-heading-color, var(--spectrum-heading-color)) ); margin-block-end: var( --mod-spectrum-contextual-help-content-spacing, @@ -64,7 +58,7 @@ governing permissions and limitations under the License. ::slotted([slot='link']) { margin-block-start: var( --mod-spectrum-contextual-help-link-spacing, - var(--spectrum-contextual-help-link-spacing) + var(--spectrum-spacing-300) ); } diff --git a/packages/dialog/package.json b/packages/dialog/package.json index ea21b208b7..da447944aa 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -85,7 +85,7 @@ "@spectrum-web-components/underlay": "^1.0.1" }, "devDependencies": { - "@spectrum-css/dialog": "11.0.0-s2-foundations.15" + "@spectrum-css/dialog": "^11.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index c72787b882..e2920f981e 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -12,37 +12,46 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --spectrum-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --spectrum-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --spectrum-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --spectrum-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --spectrum-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var( - --mod-dialog-min-inline-size, - var(--spectrum-dialog-min-inline-size) + inline-size: 480px; + inline-size: var( + --mod-dialog-width, + var(--mod-dialog-confirm-medium-width, 480px) ); + min-inline-size: 288px; + min-inline-size: var(--mod-dialog-min-inline-size, 288px); 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) - ); +.spectrum-Dialog--sizeS { + --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); } -: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) - ); +.spectrum-Dialog--sizeL { + --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); } ::slotted([slot='hero']) { @@ -99,16 +108,13 @@ governing permissions and limitations under the License. ); font-weight: var( --mod-dialog-heading-font-weight, - var(--spectrum-dialog-heading-font-weight) + var(--spectrum-heading-sans-serif-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) + var(--spectrum-line-height-100) ); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); outline: none; grid-area: heading; margin: 0; @@ -172,10 +178,7 @@ governing permissions and limitations under the License. --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) - ) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50)) ); } @@ -192,7 +195,7 @@ governing permissions and limitations under the License. ); line-height: var( --mod-dialog-confirm-description-text-line-height, - var(--spectrum-dialog-confirm-description-text-line-height) + var(--spectrum-line-height-100) ); color: var( --mod-dialog-confirm-description-text-color, @@ -207,7 +210,7 @@ governing permissions and limitations under the License. margin: 0 var( --mod-dialog-confirm-description-margin, - var(--spectrum-dialog-confirm-description-margin) + calc(var(--spectrum-spacing-50) * -1) ); outline: none; grid-area: content; @@ -220,7 +223,7 @@ governing permissions and limitations under the License. grid-area: footer; padding-block-start: var( --mod-dialog-confirm-footer-padding-top, - var(--spectrum-dialog-confirm-footer-padding-top) + var(--spectrum-spacing-600) ); display: flex; } @@ -357,10 +360,8 @@ governing permissions and limitations under the License. :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) - ); + font-size: 28px; + font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); } :host([mode='fullscreen']) .content, diff --git a/packages/divider/package.json b/packages/divider/package.json index 007db5bea9..9546f90d6b 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/divider": "4.0.0-s2-foundations.15" + "@spectrum-css/divider": "^4.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css index 5e76c19a80..8aa036461e 100644 --- a/packages/divider/src/spectrum-divider.css +++ b/packages/divider/src/spectrum-divider.css @@ -17,6 +17,28 @@ governing permissions and limitations under the License. } } +:host, +:host { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-medium + ); +} + +:host([size='s']) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-small + ); +} + +:host([size='l']) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-large + ); +} + :host { block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); inline-size: 100%; @@ -36,25 +58,11 @@ governing permissions and limitations under the License. overflow: visible; } -: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([size='l']) { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); +:host([static-color='white']), +:host([static-color='white']) { --spectrum-divider-background-color: var( - --spectrum-divider-background-color-large + --mod-divider-background-color-medium-static-white, + var(--spectrum-divider-background-color-medium-static-white) ); } @@ -65,13 +73,6 @@ governing permissions and limitations under the License. ); } -: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, @@ -79,17 +80,18 @@ governing permissions and limitations under the License. ); } -:host([static-color='black'][size='s']) { +:host([static-color='black']), +:host([static-color='black']) { --spectrum-divider-background-color: var( - --mod-divider-background-color-small-static-black, - var(--spectrum-divider-background-color-small-static-black) + --mod-divider-background-color-medium-static-black, + var(--spectrum-divider-background-color-medium-static-black) ); } -:host([static-color='black']) { +:host([static-color='black'][size='s']) { --spectrum-divider-background-color: var( - --mod-divider-background-color-medium-static-black, - var(--spectrum-divider-background-color-medium-static-black) + --mod-divider-background-color-small-static-black, + var(--spectrum-divider-background-color-small-static-black) ); } diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index cc01e61443..8e51a1279e 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/dropzone": "7.0.0-s2-foundations.16" + "@spectrum-css/dropzone": "^7.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css index dcbb63ec23..3975a80a46 100644 --- a/packages/dropzone/src/dropzone-overrides.css +++ b/packages/dropzone/src/dropzone-overrides.css @@ -12,91 +12,5 @@ /* 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 - ); } diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 23fd025125..22b1930bd6 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -12,6 +12,19 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); + --spectrum-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --spectrum-drop-zone-border-color-hover: var( + --spectrum-accent-visual-color + ); + --spectrum-drop-zone-illustration-color: var( + --spectrum-neutral-visual-color + ); + --spectrum-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); --mod-illustrated-message-content-maximum-width: var( --mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width) @@ -22,79 +35,79 @@ governing permissions and limitations under the License. ); --mod-illustrated-message-title-to-heading: var( --mod-drop-zone-illustration-to-heading, - var(--spectrum-drop-zone-illustration-to-heading) + var(--spectrum-spacing-400) ); --mod-illustrated-message-heading-to-body: var( --mod-drop-zone-heading-to-body, - var(--spectrum-drop-zone-heading-to-body) + var(--spectrum-spacing-75) ); --mod-illustrated-message-title-font-family: var( --mod-drop-zone-heading-font-family, - var(--spectrum-drop-zone-heading-font-family) + var(--spectrum-sans-font-family-stack) ); --mod-illustrated-message-title-font-weight: var( --mod-drop-zone-heading-font-weight, - var(--spectrum-drop-zone-heading-font-weight) + var(--spectrum-heading-sans-serif-font-weight) ); --mod-illustrated-message-title-font-style: var( --mod-drop-zone-heading-font-style, - var(--spectrum-drop-zone-heading-font-style) + var(--spectrum-heading-sans-serif-font-style) ); --mod-illustrated-message-title-font-size: var( --mod-drop-zone-heading-font-size, - var(--spectrum-drop-zone-heading-font-size) + var(--spectrum-drop-zone-title-size) ); --mod-illustrated-message-title-line-height: var( --mod-drop-zone-heading-line-height, - var(--spectrum-drop-zone-heading-line-height) + var(--spectrum-heading-line-height) ); --mod-illustrated-message-title-color: var( --mod-drop-zone-heading-color, - var(--spectrum-drop-zone-heading-color) + var(--spectrum-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) + var(--spectrum-sans-font-family-stack) ); --mod-illustrated-message-description-font-weight: var( --mod-drop-zone-body-font-weight, - var(--spectrum-drop-zone-body-font-weight) + var(--spectrum-body-sans-serif-font-weight) ); --mod-illustrated-message-description-font-style: var( --mod-drop-zone-body-font-style, - var(--spectrum-drop-zone-body-font-style) + var(--spectrum-body-sans-serif-font-style) ); --mod-illustrated-message-description-font-size: var( --mod-drop-zone-body-font-size, - var(--spectrum-drop-zone-body-font-size) + var(--spectrum-drop-zone-body-size) ); --mod-illustrated-message-description-line-height: var( --mod-drop-zone-body-line-height, - var(--spectrum-drop-zone-body-line-height) + var(--spectrum-body-line-height) ); --mod-illustrated-message-description-color: var( --mod-drop-zone-body-color, - var(--spectrum-drop-zone-body-color) + var(--spectrum-body-color) ); --mod-actionbutton-font-size: var( --mod-drop-zone-content-font-size, - var(--spectrum-drop-zone-content-font-size) + var(--spectrum-font-size-300) ); --mod-actionbutton-label-color: var( --mod-drop-zone-content-color, - var(--spectrum-drop-zone-content-color) + var(--spectrum-white) ); --mod-actionbutton-edge-to-text: var( --mod-drop-zone-content-edge-to-text, - var(--spectrum-drop-zone-content-edge-to-text) + var(--spectrum-component-edge-to-text-300) ); 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-padding, var(--spectrum-spacing-400)) - var( --mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width) @@ -111,13 +124,10 @@ governing permissions and limitations under the License. ); border-radius: var( --mod-drop-zone-corner-radius, - var(--spectrum-drop-zone-corner-radius) + var(--spectrum-corner-radius-100) ); border-style: dashed; - border-style: var( - --mod-drop-zone-border-style, - var(--spectrum-drop-zone-border-style, dashed) - ); + border-style: var(--mod-drop-zone-border-style, dashed); background-color: var( --mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color) @@ -128,8 +138,8 @@ governing permissions and limitations under the License. :host:lang(ja), :host:lang(ko), :host:lang(zh) { - --spectrum-drop-zone-heading-font-size: var( - --spectrum-drop-zone-heading-font-size-cjk + --mod-illustrated-message-title-font-size: var( + --spectrum-drop-zone-cjk-title-size ); } @@ -145,7 +155,7 @@ governing permissions and limitations under the License. var(--spectrum-drop-zone-background-color-opacity) ) ); - --spectrum-drop-zone-border-color: var( + --mod-drop-zone-border-color: var( --highcontrast-drop-zone-border-color-hover, var( --mod-drop-zone-border-color-hover, @@ -154,7 +164,7 @@ governing permissions and limitations under the License. ); --mod-illustrated-message-illustration-color: var( --mod-drop-zone-illustration-color-hover, - var(--spectrum-drop-zone-illustration-color-hover) + var(--spectrum-accent-visual-color) ); } @@ -175,7 +185,7 @@ governing permissions and limitations under the License. :host(:focus-visible) { --mod-drop-zone-border-style: solid; - --spectrum-drop-zone-border-color: var( + --mod-drop-zone-border-color: var( --highcontrast-drop-zone-border-color-hover, var( --mod-drop-zone-border-color-hover, @@ -187,10 +197,7 @@ governing permissions and limitations under the License. .spectrum-DropZone-content { display: none; - display: var( - --mod-drop-zone-content-display, - var(--spectrum-drop-zone-content-display, none) - ); + display: var(--mod-drop-zone-content-display, none); block-size: 100%; z-index: 1; justify-content: center; @@ -202,36 +209,36 @@ governing permissions and limitations under the License. box-sizing: border-box; block-size: var( --mod-drop-zone-content-height, - var(--spectrum-drop-zone-content-height) + var(--spectrum-component-height-300) ); max-inline-size: var( --mod-drop-zone-content-max-width, - var(--spectrum-drop-zone-content-max-width) + var(--spectrum-drop-zone-content-maximum-width) ); font-family: var( --mod-drop-zone-content-font-family, - var(--spectrum-drop-zone-content-font-family) + var(--spectrum-sans-font-family-stack) ); font-weight: var( --mod-drop-zone-content-font-weight, - var(--spectrum-drop-zone-content-font-weight) + var(--spectrum-bold-font-weight) ); font-style: var( --mod-drop-zone-content-font-style, - var(--spectrum-drop-zone-content-font-style) + var(--spectrum-default-font-style) ); line-height: var( --mod-drop-zone-content-line-height, - var(--spectrum-drop-zone-content-line-height) + var(--spectrum-line-height-100) ); border: none; padding-block-start: var( --mod-drop-zone-content-top-to-text, - var(--spectrum-drop-zone-content-top-to-text) + var(--spectrum-component-top-to-text-300) ); padding-block-end: var( --mod-drop-zone-content-bottom-to-text, - var(--spectrum-drop-zone-content-bottom-to-text) + var(--spectrum-component-bottom-to-text-300) ); } diff --git a/packages/field-group/package.json b/packages/field-group/package.json index a930f772a0..25530a0d86 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/help-text": "^1.0.3" }, "devDependencies": { - "@spectrum-css/fieldgroup": "6.0.0-s2-foundations.16" + "@spectrum-css/fieldgroup": "^6.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index 72c16e86b2..cd3743ae68 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -38,7 +38,7 @@ governing permissions and limitations under the License. } :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) { - margin-inline-end: var(--spectrum-fieldgroup-margin); + margin-inline-end: var(--spectrum-spacing-300); } :host([horizontal]) .group .spectrum-HelpText { diff --git a/packages/field-label/package.json b/packages/field-label/package.json index 3496bf3bbc..bec2c16e76 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/fieldlabel": "9.0.0-s2-foundations.16" + "@spectrum-css/fieldlabel": "^9.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index 404e400b8e..1f3e2fadb9 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -11,6 +11,79 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host, +:host { + --spectrum-field-label-min-height: var(--spectrum-component-height-75); + --spectrum-field-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --spectrum-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); +} + +:host([size='s']) { + --spectrum-field-label-min-height: var(--spectrum-component-height-75); + --spectrum-field-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --spectrum-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100); + --spectrum-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); +} + +:host([size='l']) { + --spectrum-field-label-min-height: var(--spectrum-component-height-100); + --spectrum-field-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-field-label-font-size: var(--spectrum-font-size-100); + --spectrum-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); +} + +:host([size='xl']) { + --spectrum-field-label-min-height: var(--spectrum-component-height-200); + --spectrum-field-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-field-label-font-size: var(--spectrum-font-size-200); + --spectrum-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); +} + :host { box-sizing: border-box; min-block-size: var( @@ -48,15 +121,21 @@ governing permissions and limitations under the License. ); font-weight: var( --mod-fieldlabel-font-weight, - var(--spectrum-field-label-font-weight) + var(--spectrum-regular-font-weight) ); line-height: var( --mod-fieldlabel-line-height, - var(--spectrum-field-label-line-height) + var(--spectrum-line-height-100) ); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); + color: var( + --highcontrast-field-label-content-color, + var( + --mod-fieldlabel-color, + var(--spectrum-neutral-subdued-content-color-default) + ) + ); display: block; } @@ -65,22 +144,19 @@ governing permissions and limitations under the License. :host(:lang(zh)) { --mod-fieldlabel-line-height: var( --mod-fieldlabel-line-height-cjk, - var(--spectrum-field-label-line-height-cjk) + var(--spectrum-cjk-line-height-100) ); } -:host([disabled]), -:host([disabled]) .required-icon { +:host([disabled]) { --mod-fieldlabel-color: var( - --highcontrast-field-label-disabled-content-color, - var( - --mod-disabled-content-color, - var(--spectrum-field-label-disabled-content-color) - ) + --mod-disabled-content-color, + var(--spectrum-disabled-content-color) ); } .required-icon { + color: inherit; margin-block: 0; margin-inline: var( --mod-field-label-text-to-asterisk, @@ -111,7 +187,7 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { - :host { - --highcontrast-field-label-disabled-content-color: GrayText; + :host([disabled]) { + --highcontrast-field-label-content-color: GrayText; } } diff --git a/packages/help-text/package.json b/packages/help-text/package.json index d502520451..9939eac10e 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/helptext": "6.0.0-s2-foundations.15" + "@spectrum-css/helptext": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css index 0d690297e2..75a46a3acb 100644 --- a/packages/help-text/src/spectrum-help-text.css +++ b/packages/help-text/src/spectrum-help-text.css @@ -25,8 +25,11 @@ governing permissions and limitations under the License. } :host { - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon + --spectrum-helptext-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default ); color: var( --highcontrast-helptext-content-color-default, @@ -46,6 +49,109 @@ governing permissions and limitations under the License. display: flex; } +:host([size='s']) { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); +} + +:host, +:host { + --spectrum-helptext-min-height: var(--spectrum-component-height-75); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-font-size: var(--spectrum-font-size-75); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-helptext-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-helptext-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); +} + +:host([size='l']) { + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); +} + +:host([size='xl']) { + --spectrum-helptext-min-height: var(--spectrum-component-height-200); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-200); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-helptext-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-helptext-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); +} + +:host([variant='neutral']) { + --spectrum-helptext-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); +} + +:host([variant='negative']) { + --spectrum-helptext-content-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); +} + +:host([disabled]) { + --spectrum-helptext-content-color-default: var( + --spectrum-disabled-content-color + ); + --spectrum-helptext-icon-color-default: var( + --spectrum-disabled-content-color + ); +} + +:host(:lang(ja)), +:host(:lang(ko)), +:host(:lang(zh)) { + --mod-helptext-line-height: var( + --mod-helptext-line-height-cjk, + var(--spectrum-cjk-line-height-100) + ); +} + .icon { block-size: var( --mod-helptext-icon-size, @@ -73,7 +179,7 @@ governing permissions and limitations under the License. .text { line-height: var( --mod-helptext-line-height, - var(--spectrum-helptext-line-height) + var(--spectrum-line-height-100) ); padding-block-start: var( --mod-helptext-top-to-text, @@ -85,15 +191,6 @@ governing permissions and limitations under the License. ); } -: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, diff --git a/packages/icon/package.json b/packages/icon/package.json index df11b57c88..b2ec9031ca 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -85,7 +85,7 @@ "@spectrum-web-components/iconset": "^1.0.1" }, "devDependencies": { - "@spectrum-css/icon": "8.0.0-s2-foundations.17" + "@spectrum-css/icon": "^8.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/icon/src/spectrum-icon-arrow.css b/packages/icon/src/spectrum-icon-arrow.css index d62ee2485d..13aa6dfde3 100644 --- a/packages/icon/src/spectrum-icon-arrow.css +++ b/packages/icon/src/spectrum-icon-arrow.css @@ -11,32 +11,135 @@ 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-ArrowRight75 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); +} + +.spectrum-UIIcon-ArrowRight100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); +} + +.spectrum-UIIcon-ArrowRight200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); +} + +.spectrum-UIIcon-ArrowRight300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); +} + +.spectrum-UIIcon-ArrowRight400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); +} + +.spectrum-UIIcon-ArrowRight500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); +} + +.spectrum-UIIcon-ArrowRight600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); +} + .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ArrowDown600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + 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-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ArrowLeft600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + 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-icon-size: var(--spectrum-arrow-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp100 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp200 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp300 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp400 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp500 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ArrowUp600 { + --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); + transform: rotate(270deg); } diff --git a/packages/icon/src/spectrum-icon-asterisk.css b/packages/icon/src/spectrum-icon-asterisk.css index b1cee0dbcd..df4c680e02 100644 --- a/packages/icon/src/spectrum-icon-asterisk.css +++ b/packages/icon/src/spectrum-icon-asterisk.css @@ -11,3 +11,18 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Asterisk75 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); +} + +.spectrum-UIIcon-Asterisk100 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); +} + +.spectrum-UIIcon-Asterisk200 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); +} + +.spectrum-UIIcon-Asterisk300 { + --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); +} diff --git a/packages/icon/src/spectrum-icon-checkmark.css b/packages/icon/src/spectrum-icon-checkmark.css index b1cee0dbcd..3415b252f8 100644 --- a/packages/icon/src/spectrum-icon-checkmark.css +++ b/packages/icon/src/spectrum-icon-checkmark.css @@ -11,3 +11,34 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Checkmark50 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); +} + +.spectrum-UIIcon-Checkmark75 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); +} + +.spectrum-UIIcon-Checkmark100 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); +} + +.spectrum-UIIcon-Checkmark200 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); +} + +.spectrum-UIIcon-Checkmark300 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); +} + +.spectrum-UIIcon-Checkmark400 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); +} + +.spectrum-UIIcon-Checkmark500 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); +} + +.spectrum-UIIcon-Checkmark600 { + --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); +} diff --git a/packages/icon/src/spectrum-icon-chevron.css b/packages/icon/src/spectrum-icon-chevron.css index acf07d2c95..604dd9a2f4 100644 --- a/packages/icon/src/spectrum-icon-chevron.css +++ b/packages/icon/src/spectrum-icon-chevron.css @@ -11,32 +11,135 @@ 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-ChevronRight50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); +} + +.spectrum-UIIcon-ChevronRight75 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); +} + +.spectrum-UIIcon-ChevronRight100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); +} + +.spectrum-UIIcon-ChevronRight200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); +} + +.spectrum-UIIcon-ChevronRight300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); +} + +.spectrum-UIIcon-ChevronRight400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); +} + +.spectrum-UIIcon-ChevronRight500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); +} + +.spectrum-UIIcon-ChevronDown50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + transform: rotate(90deg); +} + .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-transform: rotate(90deg); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronDown500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(90deg); +} + +.spectrum-UIIcon-ChevronLeft50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + 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-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronLeft500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + transform: rotate(180deg); +} + +.spectrum-UIIcon-ChevronUp50 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); + 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); + --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp100 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp200 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp300 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp400 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); + transform: rotate(270deg); +} + +.spectrum-UIIcon-ChevronUp500 { + --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); + 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..58ab2a3d7c 100644 --- a/packages/icon/src/spectrum-icon-corner-triangle.css +++ b/packages/icon/src/spectrum-icon-corner-triangle.css @@ -11,3 +11,18 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-CornerTriangle75 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); +} + +.spectrum-UIIcon-CornerTriangle100 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); +} + +.spectrum-UIIcon-CornerTriangle200 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); +} + +.spectrum-UIIcon-CornerTriangle300 { + --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); +} diff --git a/packages/icon/src/spectrum-icon-cross.css b/packages/icon/src/spectrum-icon-cross.css index b1cee0dbcd..ad2efc3ac2 100644 --- a/packages/icon/src/spectrum-icon-cross.css +++ b/packages/icon/src/spectrum-icon-cross.css @@ -11,3 +11,30 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Cross75 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-75); +} + +.spectrum-UIIcon-Cross100 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-100); +} + +.spectrum-UIIcon-Cross200 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-200); +} + +.spectrum-UIIcon-Cross300 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-300); +} + +.spectrum-UIIcon-Cross400 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-400); +} + +.spectrum-UIIcon-Cross500 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-500); +} + +.spectrum-UIIcon-Cross600 { + --spectrum-icon-size: var(--spectrum-cross-icon-size-600); +} diff --git a/packages/icon/src/spectrum-icon-dash.css b/packages/icon/src/spectrum-icon-dash.css index b1cee0dbcd..db9e05dd50 100644 --- a/packages/icon/src/spectrum-icon-dash.css +++ b/packages/icon/src/spectrum-icon-dash.css @@ -11,3 +11,34 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Dash50 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-50); +} + +.spectrum-UIIcon-Dash75 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-75); +} + +.spectrum-UIIcon-Dash100 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-100); +} + +.spectrum-UIIcon-Dash200 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-200); +} + +.spectrum-UIIcon-Dash300 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-300); +} + +.spectrum-UIIcon-Dash400 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-400); +} + +.spectrum-UIIcon-Dash500 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-500); +} + +.spectrum-UIIcon-Dash600 { + --spectrum-icon-size: var(--spectrum-dash-icon-size-600); +} diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index b52ba87ce3..a85c62c5ee 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -12,65 +12,53 @@ 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( + --spectrum-icon-inline-size: var( --mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)) ); - block-size: var( + --spectrum-icon-block-size: var( --mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)) ); + inline-size: var(--spectrum-icon-inline-size); + block-size: var(--spectrum-icon-block-size); color: inherit; color: var(--mod-icon-color, inherit); fill: currentColor; + pointer-events: none; display: inline-block; } -: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); +@media (forced-colors: active) { + :host { + forced-color-adjust: auto; + } } -:host([size='s']), -:host([size='s']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-s); +:host { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); } -:host, -:host([size='m']), -:host([size='m']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-m); +:host([size='xxs']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); } -:host([size='l']), -:host([size='l']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-l); +:host([size='xs']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); } -:host([size='xl']), -:host([size='xl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xl); +:host([size='s']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); } -:host([size='xxl']), -:host([size='xxl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xxl); +:host([size='l']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); } -:host(:not(:root)) { - overflow: hidden; +:host([size='xl']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); } -@media (forced-colors: active) { - :host { - forced-color-adjust: auto; - } +:host([size='xxl']) { + --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); } diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index c397682fa8..14365fcb38 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -49,7 +49,7 @@ "@spectrum-web-components/iconset": "^1.0.1" }, "devDependencies": { - "@spectrum-css/ui-icons": "^1.1.2", + "@spectrum-css/ui-icons": "^2.0.0-s2-foundations.10", "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index 8e8572604a..e6bf74491c 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -51,7 +51,7 @@ "devDependencies": { "@adobe/spectrum-css-workflow-icons": "1.5.4", "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@^4.0.0", - "@spectrum-css/icon": "8.0.0-s2-foundations.16", + "@spectrum-css/icon": "^8.0.0-s2-foundations.19", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index eb4d2f708b..cb037d193f 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/styles": "^1.0.3" }, "devDependencies": { - "@spectrum-css/illustratedmessage": "8.0.0-s2-foundations.15" + "@spectrum-css/illustratedmessage": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css index 09dba3c683..190d3e6cc9 100644 --- a/packages/illustrated-message/src/spectrum-illustratedmessage.css +++ b/packages/illustrated-message/src/spectrum-illustratedmessage.css @@ -19,6 +19,58 @@ governing permissions and limitations under the License. } :host { + --spectrum-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-illustrated-message-title-to-heading: var( + --spectrum-spacing-400 + ); + --spectrum-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --spectrum-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --spectrum-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --spectrum-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --spectrum-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --spectrum-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --spectrum-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); + --spectrum-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --spectrum-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --spectrum-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --spectrum-illustrated-message-description-color: var( + --spectrum-body-color + ); block-size: 100%; display: flex; display: var(--mod-illustrated-message-display, flex); @@ -31,6 +83,14 @@ governing permissions and limitations under the License. align-items: center; } +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); +} + #illustration { color: var( --highcontrast-illustrated-message-illustration-color, diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index f14c2383cd..5a3f74021c 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/button": "^1.0.3" }, "devDependencies": { - "@spectrum-css/infieldbutton": "6.0.0-s2-foundations.16" + "@spectrum-css/infieldbutton": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css index dedc98e33f..43ff6c61ee 100644 --- a/packages/infield-button/src/infield-button-overrides.css +++ b/packages/infield-button/src/infield-button-overrides.css @@ -42,194 +42,4 @@ --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 - ); -} - -: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='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='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='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='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='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 - ); -} - -: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 - ); } diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index 3591774f80..978f01566d 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -11,113 +11,123 @@ 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; - } - - @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) + --spectrum-infield-button-height: var(--spectrum-component-height-100); + --spectrum-infield-button-width: var(--spectrum-component-height-100); + --spectrum-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding ); - inline-size: var( - --mod-infield-button-width, - var(--spectrum-infield-button-width) + --spectrum-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill ); - padding: var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) + --spectrum-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; + --spectrum-infield-button-fill-padding: 0px; + --spectrum-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-infield-button-fill-justify-content: center; } -.fill { - block-size: 100%; - inline-size: 100%; - background-color: var( - --mod-infield-button-background-color, - var(--spectrum-infield-button-background-color) +:host([disabled]) { + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-disabled, + var(--spectrum-disabled-background-color) ); - border-width: var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) + --mod-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) ); - border-style: solid; - border-color: var( - --highcontrast-infield-button-border-color, - var( - --mod-infield-button-border-color, - var(--spectrum-infield-button-border-color) - ) + --mod-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) ); - padding: var( - --mod-infield-button-fill-padding, - var(--spectrum-infield-button-fill-padding) + --mod-infield-button-border-color: var( + --mod-infield-button-border-color-disabled, + var(--spectrum-disabled-background-color) ); - border-start-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) + --mod-infield-button-icon-color: var( + --mod-infield-button-icon-color-disabled, + var(--spectrum-disabled-content-color) ); - border-start-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) + --mod-infield-button-icon-color-hover: var( + --mod-infield-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) ); - border-end-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) + --mod-infield-button-icon-color-down: var( + --mod-infield-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) ); - border-end-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) + --mod-infield-button-icon-color-key-focus: var( + --mod-infield-button-icon-color-key-focus-disabled, + var(--spectrum-disabled-content-color) ); } -::slotted(*) { - color: var( - --mod-infield-button-icon-color, - var(--spectrum-infield-button-icon-color) +:host([size='s']) { + --spectrum-infield-button-height: var(--spectrum-component-height-75); + --spectrum-infield-button-width: var(--spectrum-component-height-75); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small ); } -:host([inline='end']) .fill { - border-start-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) +:host([size='l']) { + --spectrum-infield-button-height: var(--spectrum-component-height-200); + --spectrum-infield-button-width: var(--spectrum-component-height-200); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large ); - border-end-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) + --spectrum-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large ); } -:host([inline='start']) .fill { - border-start-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) +:host([size='xl']) { + --spectrum-infield-button-height: var(--spectrum-component-height-300); + --spectrum-infield-button-width: var(--spectrum-component-height-300); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large ); - border-end-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) + --spectrum-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large ); } :host([block='end']), :host([block='start']) { - --spectrum-infield-button-width: var( + --mod-infield-button-width: var( --mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium) ); @@ -125,7 +135,7 @@ governing permissions and limitations under the License. :host([block='end'][size='s']), :host([block='start'][size='s']) { - --spectrum-infield-button-width: var( + --mod-infield-button-width: var( --mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small) ); @@ -133,7 +143,7 @@ governing permissions and limitations under the License. :host([block='end'][size='l']), :host([block='start'][size='l']) { - --spectrum-infield-button-width: var( + --mod-infield-button-width: var( --mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large) ); @@ -141,148 +151,229 @@ governing permissions and limitations under the License. :host([block='end'][size='xl']), :host([block='start'][size='xl']) { - --spectrum-infield-button-width: var( + --mod-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: var( --mod-infield-button-background-color-quiet, transparent ); - --spectrum-infield-button-background-color-hover: var( + --mod-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: var( --mod-infield-button-background-color-down-quiet, transparent ); - --spectrum-infield-button-background-color-key-focus: var( + --mod-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: var( --mod-infield-border-color-quiet, transparent ); - --spectrum-infield-button-border-width: var( + --mod-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: var( --mod-infield-button-background-color-quiet-disabled, transparent ); - --spectrum-infield-button-border-color: var( + --mod-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; -} - @media (hover: hover) { - :host(:hover) .fill { - background-color: var( + :host(:hover) { + --mod-infield-button-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: var( --mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover) ); } } -:host(:is(:active, [active])) .fill { - background-color: var( +:host(:is(:active, [active])) { + --mod-infield-button-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: var( --mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down) ); } +:host(:focus-visible) { + --mod-infield-button-background-color: var( + --mod-infield-button-background-color-key-focus, + var(--spectrum-infield-button-background-color-key-focus) + ); + --mod-infield-button-icon-color: var( + --mod-infield-button-icon-color-key-focus, + var(--spectrum-infield-button-icon-color-key-focus) + ); +} + +@media (forced-colors: active) { + :host { + --highcontrast-infield-button-border-color: ButtonText; + --highcontrast-infield-button-border-color-active: Highlight; + } + + :host([disabled]) { + --highcontrast-infield-button-border-color: inherit; + } + + :host(:is(:active, [active])):not(:disabled), + :host:not(:disabled):focus-visible { + --highcontrast-infield-button-border-color: var( + --highcontrast-infield-button-border-color-active + ); + } + + @media (hover: hover) { + :host:not(:disabled):hover { + --highcontrast-infield-button-border-color: var( + --highcontrast-infield-button-border-color-active + ); + } + } +} + +: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; +} + +:host([disabled]) { + cursor: auto; +} + :host(:focus-visible) { outline: none; } -:host(:focus-visible) .fill { - background-color: var( - --mod-infield-button-background-color-key-focus, - var(--spectrum-infield-button-background-color-key-focus) +:host([block='end']), +:host([block='start']) { + block-size: calc( + var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / + 2 ); } -:host(:focus-visible) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-key-focus, - var(--spectrum-infield-button-icon-color-key-focus) +:host([block='start']) { + padding-block-end: 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) ); } .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) + ); align-items: center; justify-content: var( --mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content) ); + transition: border-color var(--spectrum-animation-duration-100) ease-in-out; + 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) + ); display: flex; } -:host([block='end']), -:host([block='start']) { - block-size: calc( - var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / - 2 +: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) ); } @@ -319,13 +410,6 @@ governing permissions and limitations under the License. ); } -: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( @@ -366,13 +450,6 @@ governing permissions and limitations under the License. ); } -: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, @@ -432,6 +509,10 @@ governing permissions and limitations under the License. ::slotted(*) { display: initial; + color: var( + --mod-infield-button-icon-color, + var(--spectrum-infield-button-icon-color) + ); flex-shrink: 0; margin: 0 !important; } diff --git a/packages/link/package.json b/packages/link/package.json index cdaf8ae1b6..7bb4cc61ae 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/link": "6.0.0-s2-foundations.15" + "@spectrum-css/link": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index 19a0bcde75..f37775f05d 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -13,19 +13,29 @@ 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; + --highcontrast-link-text-color: LinkText; } } +:host([variant='secondary']) a { + --mod-link-text-color: var( + --mod-link-text-color-secondary-default, + var(--spectrum-neutral-content-color-default) + ); + --mod-link-text-color-hover: var( + --mod-link-text-color-secondary-hover, + var(--spectrum-neutral-content-color-hover) + ); + --mod-link-text-color-active: var( + --mod-link-text-color-secondary-active, + var(--spectrum-neutral-content-color-down) + ); + --mod-link-text-color-focus: var( + --mod-link-text-color-secondary-focus, + var(--spectrum-neutral-content-color-key-focus) + ); +} + a { background-color: initial; -webkit-text-decoration-skip: objects; @@ -33,15 +43,18 @@ a { transition: color var( --mod-link-animation-duration, - var(--spectrum-link-animation-duration) + var(--spectrum-animation-duration-100) ) ease-in-out; cursor: pointer; color: var( - --highcontrast-link-text-color-primary-default, + --highcontrast-link-text-color, var( - --mod-link-text-color-primary-default, - var(--spectrum-link-text-color-primary-default) + --mod-link-text-color, + var( + --mod-link-text-color-primary-default, + var(--spectrum-accent-content-color-default) + ) ) ); outline: none; @@ -50,57 +63,26 @@ a { } a:active { - color: var( - --highcontrast-link-text-color-primary-active, + --mod-link-text-color: var( + --mod-link-text-color-active, var( --mod-link-text-color-primary-active, - var(--spectrum-link-text-color-primary-active) + var(--spectrum-accent-content-color-down) ) ); } a:focus-visible { - color: var( - --highcontrast-link-text-color-primary-focus, + --mod-link-text-color: var( + --mod-link-text-color-focus, var( --mod-link-text-color-primary-focus, - var(--spectrum-link-text-color-primary-focus) + var(--spectrum-accent-content-color-key-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: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([quiet]) a { @@ -108,41 +90,13 @@ a:focus-visible { 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='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, + --mod-link-text-color: var( + --mod-link-text-color-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) + var(--spectrum-accent-content-color-hover) ) ); } @@ -151,24 +105,42 @@ a:focus-visible { -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='white']) a { + --mod-link-text-color: var( + --mod-link-text-color-white, + var(--spectrum-white) + ); + --mod-link-text-color-hover: var( + --mod-link-text-color-white, + var(--spectrum-white) + ); + --mod-link-text-color-active: var( + --mod-link-text-color-white, + var(--spectrum-white) + ); + --mod-link-text-color-focus: var( + --mod-link-text-color-white, + var(--spectrum-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) - ) - ); - } +:host([static-color='black']) a { + --mod-link-text-color: var( + --mod-link-text-color-black, + var(--spectrum-black) + ); + --mod-link-text-color-hover: var( + --mod-link-text-color-black, + var(--spectrum-black) + ); + --mod-link-text-color-active: var( + --mod-link-text-color-black, + var(--spectrum-black) + ); + --mod-link-text-color-focus: var( + --mod-link-text-color-black, + var(--spectrum-black) + ); } diff --git a/packages/menu/package.json b/packages/menu/package.json index c4bb9f43e2..3297c90577 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -101,7 +101,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/menu": "8.0.0-s2-foundations.16" + "@spectrum-css/menu": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css index cdac1480d6..bc2ab5596b 100644 --- a/packages/menu/src/menu-overrides.css +++ b/packages/menu/src/menu-overrides.css @@ -12,143 +12,6 @@ /* 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 ); @@ -158,247 +21,4 @@ --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 - ); -} - -: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='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-menu.css b/packages/menu/src/spectrum-menu.css index bb8e42baf1..7048ed45c4 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -33,6 +33,129 @@ governing permissions and limitations under the License. } :host { + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); + --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); + --spectrum-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --spectrum-menu-item-focus-indicator-width: var( + --spectrum-border-width-200 + ); + --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --spectrum-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-menu-item-description-line-height: var( + --spectrum-line-height-100 + ); + --spectrum-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); + --spectrum-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-menu-section-header-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-menu-section-header-color: var(--spectrum-gray-900); + --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); + --spectrum-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --spectrum-menu-checkmark-icon-color-hover: var( + --spectrum-accent-color-1000 + ); + --spectrum-menu-checkmark-icon-color-down: var( + --spectrum-accent-color-1100 + ); + --spectrum-menu-checkmark-icon-color-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-menu-checkmark-display-hidden: none; + --spectrum-menu-checkmark-display-shown: block; + --spectrum-menu-checkmark-display: var( + --spectrum-menu-checkmark-display-shown + ); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc( + var(--spectrum-menu-item-label-inline-edge-to-content) + + var(--spectrum-menu-item-checkmark-width) + + var(--spectrum-menu-item-label-text-to-visual) + + var(--spectrum-menu-item-focus-indicator-width) + ); inline-size: auto; inline-size: var(--mod-menu-inline-size, auto); box-sizing: border-box; @@ -43,6 +166,167 @@ governing permissions and limitations under the License. overflow: auto; } +:host([size='s']) { + --spectrum-menu-item-min-height: var(--spectrum-component-height-75); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-min-width: var( + --spectrum-component-height-75 + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --spectrum-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --spectrum-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --spectrum-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); +} + +:host, +:host { + --spectrum-menu-item-min-height: var(--spectrum-component-height-100); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --spectrum-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --spectrum-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --spectrum-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); +} + +:host([size='l']) { + --spectrum-menu-item-min-height: var(--spectrum-component-height-200); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-min-width: var( + --spectrum-component-height-200 + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --spectrum-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --spectrum-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --spectrum-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); +} + +:host([size='xl']) { + --spectrum-menu-item-min-height: var(--spectrum-component-height-300); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); + --spectrum-menu-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); + --spectrum-menu-section-header-min-width: var( + --spectrum-component-height-300 + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --spectrum-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --spectrum-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --spectrum-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); +} + :host:lang(ja), :host:lang(ko), :host:lang(zh) { diff --git a/packages/meter/package.json b/packages/meter/package.json index 7431fffa4d..6fd4f82a5e 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -65,8 +65,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/meter": "0.0.0-s2-foundations.2", - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" + "@spectrum-css/meter": "^0.0.0-s2-foundations.0", + "@spectrum-css/progressbar": "^5.0.0-s2-foundations.20" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css index 60a1a39eac..9ea96df690 100644 --- a/packages/meter/src/progress-bar-overrides.css +++ b/packages/meter/src/progress-bar-overrides.css @@ -12,111 +12,8 @@ /* 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--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--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--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--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 - ); } diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index e35d60f894..2591288842 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -14,38 +14,43 @@ governing permissions and limitations under the License. :host { --mod-progressbar-size-default: var( --mod-meter-inline-size, - var(--spectrum-meter-inline-size) + var(--spectrum-meter-default-width) ); --mod-progressbar-max-size: var( --mod-meter-max-width, - var(--spectrum-meter-max-width) + var(--spectrum-meter-maximum-width) ); --mod-progressbar-min-size: var( --mod-meter-min-width, - var(--spectrum-meter-min-width) + var(--spectrum-meter-minimum-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, +:host([size='s']) { + --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); + --mod-progressbar-font-size: var(--spectrum-font-size-75); + --mod-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 ); } -:host([variant='notice']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-notice, - var(--spectrum-meter-fill-color-notice) +:host([size='l']) { + --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); + --mod-progressbar-font-size: var(--spectrum-font-size-100); + --mod-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 ); } +:host([variant='positive']) { + --mod-progressbar-fill-color: var(--spectrum-positive-visual-color); +} + +:host([variant='notice']) { + --mod-progressbar-fill-color: var(--spectrum-notice-visual-color); +} + :host([variant='negative']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-negative, - var(--spectrum-meter-fill-color-negative) - ); + --mod-progressbar-fill-color: var(--spectrum-negative-visual-color); } diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css index f8e10b8fbc..a1b4535a6c 100644 --- a/packages/meter/src/spectrum-progress-bar.css +++ b/packages/meter/src/spectrum-progress-bar.css @@ -11,214 +11,265 @@ 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) +:host, +.spectrum-ProgressBar--sizeM { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2400 ); - vertical-align: top; - inline-size: var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-large ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 ); - 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) +.spectrum-ProgressBar--sizeS { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2400 ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-small ); - 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) + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 ); } -.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) +.spectrum-ProgressBar--sizeL { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2500 + ); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 ); } -.label { - flex: 1; -} - -.percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) +.spectrum-ProgressBar--sizeXL { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2800 + ); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 ); } -.track { - inline-size: 100%; - block-size: var( +:host { + --spectrum-progressbar-size-default: var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-sized-size-default) + ); + --spectrum-progressbar-font-size: var( + --mod-progressbar-font-size, + var(--spectrum-progressbar-sized-font-size) + ); + --spectrum-progressbar-thickness: var( --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) + var(--spectrum-progressbar-sized-thickness) ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( + --spectrum-progressbar-spacing-top-to-text: var( + --mod-progressbar-spacing-top-to-text, + var(--spectrum-progressbar-sized-spacing-top-to-text) + ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --mod-progressbar-animation-ease-in-out-indeterminate, + var(--spectrum-animation-ease-in-out) + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --mod-progressbar-animation-duration-indeterminate, + var(--spectrum-animation-duration-2000) + ); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-progressbar-fill-size-indeterminate: var( + --mod-progressbar-fill-size-indeterminate, + 70% + ); + --spectrum-progressbar-dir-indeterminate-multiplier: 1; + --spectrum-progressbar-size-2400: 192px; + --spectrum-progressbar-size-2500: 200px; + --spectrum-progressbar-size-2800: 224px; + --spectrum-progressbar-line-height-cjk: var( + --mod-progressbar-line-height-cjk, + var(--spectrum-cjk-line-height-100) + ); + --spectrum-progressbar-min-size: var( + --mod-progressbar-min-size, + var(--spectrum-progress-bar-minimum-width) + ); + --spectrum-progressbar-max-size: var( + --mod-progressbar-max-size, + var(--spectrum-progress-bar-maximum-width) + ); + --spectrum-progressbar-line-height: var( + --mod-progressbar-line-height, + var(--spectrum-line-height-100) + ); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --mod-progressbar-spacing-label-to-progressbar, + var(--spectrum-spacing-75) + ); + --spectrum-progressbar-spacing-label-to-text: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-spacing-200) + ); + --spectrum-progressbar-fill-color: var( + --highcontrast-progressbar-fill-color, + var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900)) + ); + --spectrum-progressbar-track-color-default: 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) - ) + --spectrum-progressbar-text-color: var( + --mod-progressbar-text-color, + var(--spectrum-neutral-content-color-default) ); - border: none; - transition: width 1s; -} - -:host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) + --spectrum-progressbar-label-and-value-white: var( + --mod-progressbar-label-and-value-white, + var(--spectrum-white) ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) + --spectrum-progressbar-fill-color-white: var( + --mod-progressbar-fill-color-white, + var(--spectrum-white) ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) + --spectrum-progressbar-static-white-track-color: var( + --spectrum-progressbar-track-color-white ); - animation-iteration-count: infinite; - position: relative; + --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size); } -:host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host:dir(rtl), +:host([dir='rtl']) { + --spectrum-progressbar-dir-indeterminate-multiplier: -1; +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); +} + +@media (forced-colors: active) { + :host { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } + + .track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } +} + +:host { + vertical-align: top; + inline-size: var(--spectrum-progressbar-size-default); + max-inline-size: var(--spectrum-progressbar-max-size); + min-inline-size: var(--spectrum-progressbar-min-size); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } :host([side-label]) { 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) - ); +:host([static-color='white']) { + --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white); + --mod-progressbar-text-color: var( + --spectrum-progressbar-label-and-value-white + ); + --mod-progressbar-track-color: var( + --spectrum-progressbar-static-white-track-color + ); +} + +.label, +.percentage { + text-align: start; + line-height: var(--spectrum-progressbar-line-height); + color: var(--spectrum-progressbar-text-color); + margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); + margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); +} + +.label { + flex: 1; } :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) - ); + margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); +} + +.percentage { + align-self: flex-start; + margin-inline-start: 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) - ); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +.track { + inline-size: 100%; + block-size: var(--spectrum-progressbar-thickness); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--spectrum-progressbar-track-color-default); + overflow: hidden; } -: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([side-label]) .track { + flex: 1 1 var(--spectrum-progressbar-size-default); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +.fill { + block-size: var(--spectrum-progressbar-thickness); + background: var(--spectrum-progressbar-fill-color); + border: none; + transition: width 1s; } -@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) - ) - ); - } +:host([indeterminate]) .fill { + inline-size: var(--spectrum-progressbar-fill-size-indeterminate); + will-change: transform; + animation-name: indeterminate-loop; + animation-timing-function: var( + --spectrum-progressbar-animation-ease-in-out-indeterminate + ); + animation-duration: var( + --spectrum-progressbar-animation-duration-indeterminate + ); + animation-iteration-count: infinite; + position: relative; } -@keyframes indeterminate-loop-rtl { +@keyframes indeterminate-loop { 0% { transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) + calc( + var(--spectrum-progressbar-dir-indeterminate-multiplier) * -1 * + var(--spectrum-progressbar-fill-size-indeterminate) ) ); } @@ -226,20 +277,9 @@ governing permissions and limitations under the License. to { transform: translate( calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 + var(--spectrum-progressbar-dir-indeterminate-multiplier) * + var(--spectrum-progressbar-size-default) ) ); } } - -@media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; - } -} diff --git a/packages/modal/package.json b/packages/modal/package.json index 4d0ffa1cf9..90f118aa1d 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -47,7 +47,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/modal": "6.0.0-s2-foundations.16" + "@spectrum-css/modal": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css index f05f590dbb..41c3a12a29 100644 --- a/packages/modal/src/modal-overrides.css +++ b/packages/modal/src/modal-overrides.css @@ -12,26 +12,5 @@ /* 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 - ); } diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css index 325ecd48cc..59c33da1a2 100644 --- a/packages/modal/src/spectrum-modal-wrapper.css +++ b/packages/modal/src/spectrum-modal-wrapper.css @@ -23,7 +23,7 @@ governing permissions and limitations under the License. transition: visibility 0s linear var( --mod-modal-transition-animation-duration, - var(--spectrum-modal-transition-animation-duration) + var(--spectrum-animation-duration-100) ); justify-content: center; align-items: center; diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index fcd925ba52..98041952b5 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -11,129 +11,89 @@ 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) - ); -} - -:host([open]) .modal { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( +:host { + --spectrum-modal-confirm-entry-animation-duration: var( + --mod-modal-confirm-entry-animation-duration, + var(--spectrum-animation-duration-500) + ); + --spectrum-modal-confirm-entry-animation-delay: var( --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) + var( + --mod-modal-confirm-entry-animation-delay, + var(--spectrum-animation-duration-200) + ) + ); + --spectrum-modal-confirm-exit-animation-duration: var( + --mod-overlay-animation-duration, + var( + --mod-modal-confirm-exit-animation-duration, + var(--spectrum-animation-duration-100) + ) + ); + --spectrum-modal-confirm-exit-animation-delay: var( + --mod-modal-confirm-exit-animation-delay, + var(--spectrum-animation-duration-0) + ); + --spectrum-modal-fullscreen-margin: var( + --mod-modal-fullscreen-margin, + 32px ); } .modal { + visibility: hidden; + opacity: 0; transform: translateY( var( --mod-modal-confirm-entry-animation-distance, - var(--spectrum-modal-confirm-entry-animation-distance) + var(--spectrum-dialog-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) - ); + max-block-size: 90vh; + max-block-size: var(--mod-modal-max-height, 90vh); + max-inline-size: 90%; + max-inline-size: var(--mod-modal-max-width, 90%); 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) + var(--spectrum-corner-radius-100) ); pointer-events: auto; transition: - opacity - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) + opacity 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 + var(--spectrum-modal-confirm-exit-animation-delay), + visibility var(--spectrum-animation-duration-0) + var(--spectrum-animation-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) - ) + var(--spectrum-modal-confirm-exit-animation-delay) + + var(--spectrum-modal-confirm-exit-animation-duration) ), - transform 0s linear + transform var(--spectrum-animation-duration-0) + var(--spectrum-animation-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) - ) + var(--spectrum-modal-confirm-exit-animation-delay) + + var(--spectrum-modal-confirm-exit-animation-duration) ); outline: none; overflow: hidden; } :host([open]) .modal { + pointer-events: auto; + visibility: visible; + opacity: 1; transition: - transform - var( - --mod-modal-confirm-entry-animation-duration, - var(--spectrum-modal-confirm-entry-animation-duration) - ) + transform 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-modal-confirm-entry-animation-delay), + opacity 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) - ); + var(--spectrum-modal-confirm-entry-animation-delay); transform: translateY(0); } @@ -152,22 +112,10 @@ governing permissions and limitations under the License. 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) - ); + inset-block-start: var(--spectrum-modal-fullscreen-margin); + inset-block-end: var(--spectrum-modal-fullscreen-margin); + inset-inline-start: var(--spectrum-modal-fullscreen-margin); + inset-inline-end: var(--spectrum-modal-fullscreen-margin); } .fullscreenTakeover { diff --git a/packages/number-field/package.json b/packages/number-field/package.json index 7f14bc770d..b18a55f32d 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -69,7 +69,7 @@ }, "devDependencies": { "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "7.0.0-s2-foundations.18" + "@spectrum-css/stepper": "^7.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css index 822d373bc9..9fb6a69e60 100644 --- a/packages/number-field/src/number-field-overrides.css +++ b/packages/number-field/src/number-field-overrides.css @@ -13,7 +13,9 @@ /* 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-default: var( + --system-stepper-border-color-default + ); --spectrum-stepper-border-color-hover: var( --system-stepper-border-color-hover ); @@ -26,13 +28,6 @@ --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 ); @@ -54,25 +49,12 @@ --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 ); @@ -82,47 +64,19 @@ --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='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='xl']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); - --spectrum-stepper-height: var(--system-stepper-size-xl-height); +:host([quiet]) #textfield { + --spectrum-stepper-buttons-border-style: var( + --system-stepper-quiet-buttons-border-style + ); + --spectrum-stepper-button-edge-to-fill: var( + --system-stepper-quiet-button-edge-to-fill + ); } diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index f85c15210c..49006ea7fe 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -11,361 +11,328 @@ 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( +@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-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; + } + + :host([disabled]) #textfield { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + } + + :host([focused]:not([disabled])) #textfield, + :host(:not([disabled])) #textfield:focus { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-focus + ); + } + + @media (hover: hover) { + :host(:not([disabled]):hover) #textfield { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-hover + ); + } + + :host([focused]:not([disabled]):hover) #textfield, + :host(:not([disabled]):hover) #textfield:focus { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-focus-hover + ); + } + } + + :host([keyboard-focused]:not([disabled])) #textfield, + :host(:not([disabled])) #textfield:focus-visible { + --highcontrast-stepper-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus + ); + } + + .input { + --highcontrast-textfield-border-color: var( + --highcontrast-stepper-border-color + ); + } + + .button { + --highcontrast-infield-button-border-color: var( + --highcontrast-stepper-border-color + ); + --highcontrast-infield-button-border-color-active: var( + --highcontrast-stepper-border-color + ); + } +} + +:host { + --spectrum-stepper-border-color: var( --highcontrast-stepper-border-color, var( - --mod-stepper-buttons-border-color, - var(--spectrum-stepper-buttons-border-color) + --mod-stepper-border-color, + var(--spectrum-stepper-border-color-default) ) ); - --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( + --spectrum-stepper-border-radius: var( --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) + var(--spectrum-corner-radius-100) ); - 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: ''; -} - -#textfield:after { - content: ''; - inline-size: 100%; - block-size: var( + --spectrum-stepper-focus-indicator-width: var( --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) + var(--spectrum-focus-indicator-thickness) ); - 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 + --spectrum-stepper-focus-indicator-gap: var( + --mod-stepper-focus-indicator-gap, + var(--spectrum-focus-indicator-gap) ); - inset-inline-start: 0; -} - -:host([focused]) #textfield, -#textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus, + --spectrum-stepper-focus-indicator-color: var( + --highcontrast-stepper-focus-indicator-color, var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) + --mod-stepper-focus-indicator-color, + var(--spectrum-focus-indicator-color) ) ); - --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) - ) + --spectrum-stepper-animation-duration: var( + --mod-stepper-animation-duration, + var(--spectrum-animation-duration-100) ); } -: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) - ) +#textfield, +:host([size='m']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-medium) + ); + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-100) ); } -: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) - ) +:host([size='s']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-small) ); - --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) - ) + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-75) ); } -: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) - ) +:host([size='l']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-large) ); - outline-offset: var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-200) ); } -:host([keyboard-focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus-visible .input { - outline: none; +:host([size='xl']) #textfield { + --spectrum-stepper-button-width: var( + --mod-stepper-button-width, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); + --spectrum-stepper-height: var( + --mod-stepper-height, + var(--spectrum-component-height-300) + ); } -: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([disabled]) #textfield { + --spectrum-stepper-buttons-border-width: var( + --spectrum-stepper-button-border-width-disabled + ); + --spectrum-stepper-buttons-background-color: var( + --spectrum-stepper-buttons-background-color-disabled ); } -:host([invalid]:not([disabled])) #textfield { +:host([invalid]) #textfield { --mod-stepper-border-color: var( --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) + var(--spectrum-negative-border-color-default) ); --mod-stepper-border-color-hover: var( --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) + var(--spectrum-negative-border-color-hover) ); --mod-stepper-border-color-focus: var( --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) + var(--spectrum-negative-border-color-focus) ); --mod-stepper-border-color-focus-hover: var( --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) + var(--spectrum-negative-border-color-focus-hover) ); --mod-stepper-border-color-keyboard-focus: var( --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) + var(--spectrum-negative-border-color-key-focus) ); - --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([focused]:not([disabled])) #textfield, +:host(:not([disabled])) #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-stepper-buttons-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) ); } -: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([keyboard-focused]:not([disabled])) #textfield { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-keyboard-focus) + ) ); } -:host([disabled]) #textfield { +:host([quiet]) #textfield { + --mod-stepper-buttons-background-color: transparent; +} + +:host([quiet][keyboard-focused]:not([disabled])) #textfield { + --mod-stepper-focus-indicator-visibility: visible; +} + +:host([quiet][invalid]) #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-stepper-border-color-invalid, + var(--spectrum-negative-border-color-default) ); +} + +:host { --mod-infield-button-border-color: var( - --spectrum-stepper-button-border-color-disabled + --mod-stepper-buttons-border-color, + var(--spectrum-stepper-buttons-border-color) ); - --mod-textfield-border-color-disabled: var( - --spectrum-stepper-button-border-color-disabled + --mod-infield-button-border-color-quiet-disabled: var( + --spectrum-disabled-border-color ); -} - -#textfield .input { - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + --mod-infield-button-border-width: var( + --mod-stepper-button-border-width, + var(--spectrum-stepper-button-border-width) ); - 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-textfield-border-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) - ); + --mod-textfield-border-color: var(--spectrum-stepper-border-color); } -#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, +:host(:not([disabled])[focused]) #textfield, +:host(:not([disabled])) #textfield:focus { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus, var( - --mod-stepper-buttons-border-width, - var(--spectrum-stepper-buttons-border-width) + --mod-stepper-buttons-border-color-focus, + var(--spectrum-stepper-buttons-border-color-focus) ) ); - background-color: var( - --highcontrast-stepper-buttons-background-color, + --mod-textfield-focus-indicator-width: 0; +} + +:host([keyboard-focused]:not([disabled])) #textfield, +:host(:not([disabled])) #textfield:focus-visible { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, var( - --mod-stepper-buttons-background-color, - var(--spectrum-stepper-buttons-background-color) + --mod-stepper-buttons-border-color-keyboard-focus, + var(--spectrum-stepper-buttons-border-color-keyboard-focus) ) ); - transition: border-color + --mod-textfield-focus-indicator-width: 0; + --mod-textfield-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, var( - --mod-stepper-animation-duration, - var(--spectrum-stepper-animation-duration) + --mod-stepper-border-color-keyboard-focus, + var(--spectrum-stepper-border-color-keyboard-focus) ) - 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; + outline: var(--spectrum-stepper-focus-indicator-width) solid; + outline-color: var(--spectrum-stepper-focus-indicator-color); + outline-offset: var(--spectrum-stepper-focus-indicator-gap); } -:host([quiet]) #textfield { - 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; +:host([invalid]) #textfield { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ) + ); + --mod-textfield-icon-spacing-inline-start-invalid: 0; } -:host([quiet]) #textfield.hide-stepper .input { - border-inline-end-width: 0; - border-end-end-radius: 0; +:host([invalid][focused]) #textfield, +:host([invalid]) #textfield:focus { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ) + ); } -: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( +:host([invalid][keyboard-focused]) #textfield, +:host([invalid]) #textfield:focus-visible { + --mod-infield-button-border-color: var( --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ) ); - border-block-end-style: solid; - border-end-end-radius: 0; } -:host([quiet]) #textfield .button { +:host([quiet]) #textfield { --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-border-color: var(--spectrum-stepper-border-color); + --mod-infield-button-border-color-quiet: var( + --spectrum-stepper-border-color + ); + --mod-infield-button-border-block-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) ); --mod-infield-button-stacked-bottom-border-block-end-width: var( --mod-stepper-border-width, @@ -374,18 +341,27 @@ governing permissions and limitations under the License. --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; + --mod-infield-button-inner-edge-to-fill: var( + --spectrum-stepper-button-edge-to-fill + ); + --mod-infield-button-edge-to-fill: var( + --spectrum-stepper-button-edge-to-fill + ); + --mod-textfield-focus-indicator-color: transparent; + --mod-textfield-background-color: transparent; + --mod-textfield-border-color-hover: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); } -:host([quiet][focused]) #textfield, -:host([quiet]) #textfield:focus { +:host([quiet][focused]:not([disabled])) #textfield, +:host([quiet]:not([disabled])) #textfield:focus { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus) @@ -395,27 +371,16 @@ governing permissions and limitations under the License. :host([quiet][keyboard-focused]:not([disabled])) #textfield { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, + --highcontrast-stepper-border-color, 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) - ) - ); } @media (hover: hover) { - :host(:hover:not([disabled])) #textfield { + :host(:not([disabled]):hover) #textfield { --mod-stepper-border-color: var( --highcontrast-stepper-border-color-hover, var( @@ -423,38 +388,45 @@ governing permissions and limitations under the License. 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 { + :host([focused]:not([disabled]):hover) #textfield, + :host(:not([disabled]):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-stepper-border-color-focus-hover, + var(--spectrum-stepper-border-color-focus-hover) ) ); - --mod-infield-button-border-color: var( + --mod-stepper-buttons-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-stepper-border-color-focus-hover, + var(--spectrum-stepper-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( + :host([quiet]:not([disabled]):hover) #textfield { + --mod-stepper-buttons-background-color: transparent; + } + + :host(:hover) #textfield:not(.is-invalid, .is-disabled) { + --mod-infield-button-border-color: var( + --mod-stepper-buttons-border-color-hover, + var(--spectrum-stepper-buttons-border-color-hover) + ); + } + + :host(:not([disabled])[focused]:hover) #textfield, + :host(:not([disabled]):hover) #textfield:focus { + --mod-infield-button-border-color: var( + --mod-stepper-buttons-border-color-focus-hover, + var(--spectrum-stepper-buttons-border-color-focus-hover) + ); + --mod-textfield-focus-indicator-width: 0; + --mod-textfield-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( --mod-stepper-border-color-focus-hover, @@ -463,24 +435,37 @@ governing permissions and limitations under the License. ); } - :host([invalid]:not([disabled]):hover) #textfield { + :host([invalid]:hover) #textfield { --mod-infield-button-border-color: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-negative-border-color-hover) + ) ); } - :host([invalid][focused]:not([disabled]):hover) #textfield, - :host([invalid]:not([disabled]):hover) #textfield:focus { + :host([invalid][focused]:hover) #textfield, + :host([invalid]:hover) #textfield:focus { --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) + --highcontrast-stepper-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-textfield-border-color-hover: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover) @@ -488,14 +473,10 @@ governing permissions and limitations under the License. ); } - :host([quiet]:not([disabled]):hover) #textfield .buttons { - background-color: initial; - } - - :host([quiet][focused]:hover) #textfield, - :host([quiet]:hover) #textfield:focus { + :host([quiet][focused]:not([disabled]):hover) #textfield, + :host([quiet]:not([disabled]):hover) #textfield:focus { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover) @@ -505,7 +486,7 @@ governing permissions and limitations under the License. :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, + --highcontrast-stepper-border-color, var( --mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover) @@ -514,35 +495,109 @@ governing permissions and limitations under the License. } } -@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; - } +#textfield { + --spectrum-stepper-width: var( + --mod-stepper-width, + calc( + var(--spectrum-stepper-height) * + var( + --mod-stepper-min-width-multiplier, + var(--spectrum-text-field-minimum-width-multiplier) + ) + var(--spectrum-stepper-button-width) + + var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ) * 2 + ) + ); + inline-size: var(--spectrum-stepper-width); + block-size: var(--spectrum-stepper-height); + border-radius: var(--spectrum-stepper-border-radius); + flex-flow: row; + display: inline-flex; + position: relative; +} - :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; - } +#textfield:before { + content: ''; +} - :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) - ); - } +.input { + border-inline-end-width: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.buttons { + box-sizing: border-box; + block-size: var(--spectrum-stepper-height); + inline-size: var(--spectrum-stepper-button-width); + 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( + --mod-stepper-buttons-background-color, + var(--spectrum-stepper-buttons-background-color) + ); + transition: border-color var(--spectrum-stepper-animation-duration) + ease-in-out; + border-inline-start-width: 0; + flex-direction: column; + justify-content: center; + display: flex; +} + +.buttons, +#textfield.hide-stepper .input { + border-start-end-radius: var(--spectrum-stepper-border-radius); + border-end-end-radius: var(--spectrum-stepper-border-radius); +} + +#textfield.hide-stepper .input { + border-inline-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); +} + +:host([quiet]) #textfield { + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; +} + +:host([quiet]) .hide-stepper .input { + border-inline-end-width: 0; + border-end-end-radius: 0; +} + +:host([quiet]):after { + visibility: hidden; + visibility: var(--mod-stepper-focus-indicator-visibility, hidden); + content: ''; + inline-size: 100%; + block-size: var(--spectrum-stepper-focus-indicator-width); + background-color: var(--spectrum-stepper-focus-indicator-color); + position: absolute; + inset-block-end: calc( + ( + var(--spectrum-stepper-focus-indicator-gap) + + var(--spectrum-stepper-focus-indicator-width) + ) * -1 + ); + inset-inline-start: 0; +} + +:host([quiet][keyboard-focused]:not([disabled])) { + outline: none; } diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 89e7b87274..6b1f0591ad 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/pickerbutton": "6.0.0-s2-foundations.16" + "@spectrum-css/pickerbutton": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css index b3b2a5d330..2c44bd85df 100644 --- a/packages/picker-button/src/picker-button-overrides.css +++ b/packages/picker-button/src/picker-button-overrides.css @@ -39,120 +39,4 @@ --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='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 - ); } diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 4e5736eb06..03be85c195 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -12,140 +12,147 @@ 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) + --spectrum-picker-button-height: var(--spectrum-component-height-100); + --spectrum-picker-button-width: var(--spectrum-component-height-100); + --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill ); - box-sizing: border-box; - padding: var( - --mod-picker-button-padding, - var(--spectrum-picker-button-padding) + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --spectrum-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-button-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-picker-button-font-style: var(--spectrum-default-font-style); + --spectrum-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + --spectrum-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --spectrum-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; } @media (hover: hover) { - .root:hover .spectrum-PickerButton-fill { - background-color: var( + .root:hover { + --mod-picker-button-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: 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: 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( +:host([open]) .root, +:host(:is(:active, [active])) .root { + --mod-picker-button-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: 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: 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( +:host([focused]) .root, +.root.is-keyboardFocused, +.root:focus, +.root:focus-visible { + --mod-picker-button-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: 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: 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) + var(--spectrum-disabled-background-color) ); --mod-picker-button-background-color-hover: var( --mod-picker-button-background-color-hover-disabled, - var(--spectrum-picker-button-background-color-hover-disabled) + var(--spectrum-disabled-background-color) ); --mod-picker-button-background-color-down: var( --mod-picker-button-background-color-down-disabled, - var(--spectrum-picker-button-background-color-down-disabled) + var(--spectrum-disabled-background-color) ); --mod-picker-button-border-color: var( --mod-picker-button-border-color-disabled, - var(--spectrum-picker-button-border-color-disabled) + var(--spectrum-disabled-background-color) ); --mod-picker-button-font-color: var( --mod-picker-button-font-color-disabled, - var(--spectrum-picker-button-font-color-disabled) + var(--spectrum-disabled-content-color) ); --mod-picker-button-font-color-hover: var( --mod-picker-button-font-color-hover-disabled, - var(--spectrum-picker-button-font-color-hover-disabled) + var(--spectrum-disabled-content-color) ); --mod-picker-button-font-color-down: var( --mod-picker-button-font-color-down-disabled, - var(--spectrum-picker-button-font-color-down-disabled) + var(--spectrum-disabled-content-color) ); --mod-picker-button-icon-color: var( --mod-picker-button-icon-color-disabled, - var(--spectrum-picker-button-icon-color-disabled) + var(--spectrum-disabled-content-color) ); --mod-picker-button-icon-color-hover: var( --mod-picker-button-icon-color-hover-disabled, - var(--spectrum-picker-button-icon-color-hover-disabled) + var(--spectrum-disabled-content-color) ); --mod-picker-button-icon-color-down: var( --mod-picker-button-icon-color-down-disabled, - var(--spectrum-picker-button-icon-color-down-disabled) + var(--spectrum-disabled-content-color) ); } @@ -172,55 +179,57 @@ governing permissions and limitations under the License. ); } -:host([quiet]) .root.is-disabled, -:host([quiet][disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent +:host([size='s']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-75); + --spectrum-picker-button-width: var(--spectrum-component-height-75); + --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); + --spectrum-picker-button-font-size: var(--spectrum-font-size-75); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 ); } -: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([size='l']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-200); + --spectrum-picker-button-width: var(--spectrum-component-height-200); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); + --spectrum-picker-button-font-size: var(--spectrum-font-size-200); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 ); } -: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([size='xl']) .root { + --spectrum-picker-button-height: var(--spectrum-component-height-300); + --spectrum-picker-button-width: var(--spectrum-component-height-300); + --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); + --spectrum-picker-button-font-size: var(--spectrum-font-size-300); + --spectrum-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 ); } -:host([position='left']) .spectrum-PickerButton-fill { - border-start-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) +.root { + background-color: initial; + block-size: var( + --mod-picker-button-width, + var(--spectrum-picker-button-width) ); - border-end-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) + 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; } -: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) +.root.uiicononly { + inline-size: var( + --mod-picker-button-height, + var(--spectrum-picker-button-height) ); } @@ -258,6 +267,10 @@ governing permissions and limitations under the License. overflow: hidden; } +.uiicononly .spectrum-PickerButton-label { + display: none; +} + .spectrum-PickerButton-fill { box-sizing: border-box; block-size: 100%; @@ -317,12 +330,48 @@ governing permissions and limitations under the License. display: flex; } -.spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color, - var(--spectrum-picker-button-icon-color) +: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='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) ); - flex-shrink: 0; } :host([rounded]) .spectrum-PickerButton-fill { @@ -344,17 +393,6 @@ governing permissions and limitations under the License. ); } -.uiicononly { - inline-size: var( - --mod-picker-button-height, - var(--spectrum-picker-button-height) - ); -} - -.uiicononly .spectrum-PickerButton-label { - display: none; -} - .uiicononly .spectrum-PickerButton-fill { padding: 0; } @@ -362,3 +400,11 @@ governing permissions and limitations under the License. .textuiicon .spectrum-PickerButton-fill { inline-size: auto; } + +.spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color, + var(--spectrum-picker-button-icon-color) + ); + flex-shrink: 0; +} diff --git a/packages/picker/package.json b/packages/picker/package.json index 910a7972cb..9e2e01f030 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -98,7 +98,7 @@ "@spectrum-web-components/tray": "^1.0.3" }, "devDependencies": { - "@spectrum-css/picker": "9.0.0-s2-foundations.15" + "@spectrum-css/picker": "^9.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css index 3da034b6e1..af3de77e20 100644 --- a/packages/picker/src/picker-overrides.css +++ b/packages/picker/src/picker-overrides.css @@ -18,15 +18,15 @@ --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-active: var( + --system-picker-background-color-active + ); --spectrum-picker-background-color-key-focus: var( --system-picker-background-color-key-focus ); @@ -48,238 +48,8 @@ --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='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 + --spectrum-picker-border-color-disabled: var( + --system-picker-border-color-disabled ); + --spectrum-picker-border-width: var(--system-picker-border-width); } diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index 278f7253f2..394c06df98 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -87,6 +87,240 @@ governing permissions and limitations under the License. outline: none; } +:host { + --spectrum-picker-font-size: var(--spectrum-font-size-100); + --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); + --spectrum-picker-placeholder-font-style: var( + --spectrum-default-font-style + ); + --spectrum-picker-line-height: var(--spectrum-line-height-100); + --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-inline-size: var(--spectrum-field-width); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-picker-spacing-label-to-picker: var( + --spectrum-field-label-to-component + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --spectrum-picker-animation-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --spectrum-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --spectrum-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --spectrum-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); + --spectrum-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-picker-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-picker-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + +:host([size='s']) { + --spectrum-picker-font-size: var(--spectrum-font-size-75); + --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); +} + +:host([size='l']) { + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); +} + +:host([size='xl']) { + --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); +} + @media (forced-colors: active) { :host { --highcontrast-picker-focus-indicator-color: Highlight; @@ -563,6 +797,7 @@ governing permissions and limitations under the License. } .validation-icon { + flex-shrink: 0; margin-block-start: calc( var( --mod-picker-spacing-top-to-alert-icon, @@ -818,8 +1053,10 @@ governing permissions and limitations under the License. var(--spectrum-picker-background-color-disabled) ) ); - border-color: #0000; - border-color: var(--highcontrast-picker-border-color-disabled, transparent); + border-color: var( + --highcontrast-picker-border-color-disabled, + var(--spectrum-picker-border-color-disabled) + ); color: var( --highcontrast-picker-content-color-disabled, var( diff --git a/packages/popover/package.json b/packages/popover/package.json index 881fc0f6c2..7a8ecff6d2 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/overlay": "^1.0.3" }, "devDependencies": { - "@spectrum-css/popover": "8.0.0-s2-foundations.16" + "@spectrum-css/popover": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css index 1790ee3b82..569bfb9280 100644 --- a/packages/popover/src/popover-overrides.css +++ b/packages/popover/src/popover-overrides.css @@ -13,27 +13,4 @@ /* 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 - ); } diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 4ebdf34af8..27474b8944 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -50,6 +50,32 @@ governing permissions and limitations under the License. ); } +:host { + --spectrum-popover-animation-distance: var(--spectrum-spacing-100); + --spectrum-popover-background-color: var( + --spectrum-background-layer-2-color + ); + --spectrum-popover-border-color: var(--spectrum-gray-400); + --spectrum-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); + --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); + --spectrum-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --spectrum-popover-pointer-edge-spacing: calc( + var(--spectrum-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); +} + @media (forced-colors: active) { :host { --highcontrast-popover-border-color: CanvasText; @@ -106,11 +132,8 @@ governing permissions and limitations under the License. stroke-linecap: square; stroke-linejoin: miter; fill: var( - --highcontrast-popover-background-color, - var( - --mod-popover-background-color, - var(--spectrum-popover-background-color) - ) + --mod-popover-background-color, + var(--spectrum-popover-background-color) ); stroke: var( --highcontrast-popover-border-color, diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index e8b120dfbd..5bef9d2d21 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" + "@spectrum-css/progressbar": "^5.0.0-s2-foundations.20" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css index c9c2a7c5f5..9ea96df690 100644 --- a/packages/progress-bar/src/progress-bar-overrides.css +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -12,111 +12,8 @@ /* 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 - ); -} - -: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 - ); -} - -: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='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..fc23004d34 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -11,214 +11,265 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host, :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) + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2400 ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-large ); - min-inline-size: var( - --mod-progressbar-min-size, - var(--spectrum-progressbar-min-size) + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 ); - 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) +:host([size='s']) { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2400 ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-small ); - 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) + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 ); } -.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) +:host([size='l']) { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2500 + ); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 ); } -.label { - flex: 1; -} - -.percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) +:host([size='xl']) { + --spectrum-progressbar-sized-size-default: var( + --spectrum-progressbar-size-2800 + ); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-sized-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --spectrum-progressbar-sized-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 ); } -.track { - inline-size: 100%; - block-size: var( +:host { + --spectrum-progressbar-size-default: var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-sized-size-default) + ); + --spectrum-progressbar-font-size: var( + --mod-progressbar-font-size, + var(--spectrum-progressbar-sized-font-size) + ); + --spectrum-progressbar-thickness: var( --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) + var(--spectrum-progressbar-sized-thickness) ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( + --spectrum-progressbar-spacing-top-to-text: var( + --mod-progressbar-spacing-top-to-text, + var(--spectrum-progressbar-sized-spacing-top-to-text) + ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --mod-progressbar-animation-ease-in-out-indeterminate, + var(--spectrum-animation-ease-in-out) + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --mod-progressbar-animation-duration-indeterminate, + var(--spectrum-animation-duration-2000) + ); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-progressbar-fill-size-indeterminate: var( + --mod-progressbar-fill-size-indeterminate, + 70% + ); + --spectrum-progressbar-dir-indeterminate-multiplier: 1; + --spectrum-progressbar-size-2400: 192px; + --spectrum-progressbar-size-2500: 200px; + --spectrum-progressbar-size-2800: 224px; + --spectrum-progressbar-line-height-cjk: var( + --mod-progressbar-line-height-cjk, + var(--spectrum-cjk-line-height-100) + ); + --spectrum-progressbar-min-size: var( + --mod-progressbar-min-size, + var(--spectrum-progress-bar-minimum-width) + ); + --spectrum-progressbar-max-size: var( + --mod-progressbar-max-size, + var(--spectrum-progress-bar-maximum-width) + ); + --spectrum-progressbar-line-height: var( + --mod-progressbar-line-height, + var(--spectrum-line-height-100) + ); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --mod-progressbar-spacing-label-to-progressbar, + var(--spectrum-spacing-75) + ); + --spectrum-progressbar-spacing-label-to-text: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-spacing-200) + ); + --spectrum-progressbar-fill-color: var( + --highcontrast-progressbar-fill-color, + var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900)) + ); + --spectrum-progressbar-track-color-default: 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) - ) + --spectrum-progressbar-text-color: var( + --mod-progressbar-text-color, + var(--spectrum-neutral-content-color-default) ); - border: none; - transition: width 1s; -} - -:host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) + --spectrum-progressbar-label-and-value-white: var( + --mod-progressbar-label-and-value-white, + var(--spectrum-white) ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) + --spectrum-progressbar-fill-color-white: var( + --mod-progressbar-fill-color-white, + var(--spectrum-white) ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) + --spectrum-progressbar-static-white-track-color: var( + --spectrum-progressbar-track-color-white ); - animation-iteration-count: infinite; - position: relative; + --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size); } -:host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host:dir(rtl), +:host([dir='rtl']) { + --spectrum-progressbar-dir-indeterminate-multiplier: -1; +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); +} + +@media (forced-colors: active) { + :host { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + } + + .track { + forced-color-adjust: none; + border: 1px solid ButtonText; + } +} + +:host { + vertical-align: top; + inline-size: var(--spectrum-progressbar-size-default); + max-inline-size: var(--spectrum-progressbar-max-size); + min-inline-size: var(--spectrum-progressbar-min-size); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } :host([side-label]) { 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) - ); +:host([static-color='white']) { + --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white); + --mod-progressbar-text-color: var( + --spectrum-progressbar-label-and-value-white + ); + --mod-progressbar-track-color: var( + --spectrum-progressbar-static-white-track-color + ); +} + +.label, +.percentage { + text-align: start; + line-height: var(--spectrum-progressbar-line-height); + color: var(--spectrum-progressbar-text-color); + margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); + margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); +} + +.label { + flex: 1; } :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) - ); + margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); +} + +.percentage { + align-self: flex-start; + margin-inline-start: 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) - ); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +.track { + inline-size: 100%; + block-size: var(--spectrum-progressbar-thickness); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--spectrum-progressbar-track-color-default); + overflow: hidden; } -: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([side-label]) .track { + flex: 1 1 var(--spectrum-progressbar-size-default); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +.fill { + block-size: var(--spectrum-progressbar-thickness); + background: var(--spectrum-progressbar-fill-color); + border: none; + transition: width 1s; } -@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) - ) - ); - } +:host([indeterminate]) .fill { + inline-size: var(--spectrum-progressbar-fill-size-indeterminate); + will-change: transform; + animation-name: indeterminate-loop; + animation-timing-function: var( + --spectrum-progressbar-animation-ease-in-out-indeterminate + ); + animation-duration: var( + --spectrum-progressbar-animation-duration-indeterminate + ); + animation-iteration-count: infinite; + position: relative; } -@keyframes indeterminate-loop-rtl { +@keyframes indeterminate-loop { 0% { transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) + calc( + var(--spectrum-progressbar-dir-indeterminate-multiplier) * -1 * + var(--spectrum-progressbar-fill-size-indeterminate) ) ); } @@ -226,20 +277,9 @@ governing permissions and limitations under the License. to { transform: translate( calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 + var(--spectrum-progressbar-dir-indeterminate-multiplier) * + var(--spectrum-progressbar-size-default) ) ); } } - -@media (forced-colors: active) { - .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/package.json b/packages/progress-circle/package.json index a410d4f282..326a05e8bd 100644 --- a/packages/progress-circle/package.json +++ b/packages/progress-circle/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/progresscircle": "4.0.0-s2-foundations.15" + "@spectrum-css/progresscircle": "^4.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css index 04b68cee39..88af5c55bc 100644 --- a/packages/progress-circle/src/progress-circle-overrides.css +++ b/packages/progress-circle/src/progress-circle-overrides.css @@ -15,34 +15,10 @@ --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='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..37dfe63359 100644 --- a/packages/progress-circle/src/spectrum-progress-circle.css +++ b/packages/progress-circle/src/spectrum-progress-circle.css @@ -23,6 +23,25 @@ governing permissions and limitations under the License. } :host { + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); + --spectrum-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --spectrum-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --spectrum-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --spectrum-progress-circle-track-border-style: solid; + inline-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + block-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); position: var(--mod-progress-circle-position, relative); direction: ltr; display: inline-block; @@ -30,8 +49,31 @@ governing permissions and limitations under the License. transform: translateZ(0); } -:host, +:host([size='s']) { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-small + ); +} + +:host { + --spectrum-progress-circle-size: var( + --spectrum-progress-circle-size-medium + ); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); +} + +:host([size='l']) { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); + --spectrum-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-large + ); +} + .track { + box-sizing: border-box; inline-size: var( --mod-progress-circle-size, var(--spectrum-progress-circle-size) @@ -40,16 +82,9 @@ governing permissions and limitations under the License. --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) - ) + --mod-progress-circle-track-border-style, + var(--spectrum-progress-circle-track-border-style) ); border-width: var( --mod-progress-circle-thickness, diff --git a/packages/radio/package.json b/packages/radio/package.json index f3edf1979d..c25478698b 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -73,7 +73,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/radio": "10.0.0-s2-foundations.15" + "@spectrum-css/radio": "^10.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index b154c61b2d..3880b6ed48 100644 --- a/packages/radio/src/radio-overrides.css +++ b/packages/radio/src/radio-overrides.css @@ -24,187 +24,7 @@ --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-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-font-size: var(--system-radio-font-size); - --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-button-top-to-control: var( - --system-radio-button-top-to-control - ); -} - -:host(:lang(ja)) { - --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 - ); -} - -:host(:lang(ko)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-ko-line-height-cjk - ); -} - -: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 { - --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='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([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 - ); } diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 455d90ccda..52d8a78541 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -11,8 +11,141 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --spectrum-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --spectrum-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --spectrum-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --spectrum-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-radio-border-width: var(--spectrum-border-width-200); + --spectrum-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --spectrum-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --spectrum-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --spectrum-radio-line-height: var(--spectrum-line-height-100); + --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); +} + +:host(:lang(ja)), +:host(:lang(ko)), +:host(:lang(zh)) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); +} + +:host, +:host { + --spectrum-radio-height: var(--spectrum-component-height-100); + --spectrum-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-radio-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --spectrum-radio-font-size: var(--spectrum-font-size-100); +} + +:host([size='s']) { + --spectrum-radio-height: var(--spectrum-component-height-75); + --spectrum-radio-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-radio-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --spectrum-radio-font-size: var(--spectrum-font-size-75); +} + +:host([size='l']) { + --spectrum-radio-height: var(--spectrum-component-height-200); + --spectrum-radio-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-radio-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --spectrum-radio-font-size: var(--spectrum-font-size-200); +} + +:host([size='xl']) { + --spectrum-radio-height: var(--spectrum-component-height-300); + --spectrum-radio-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-radio-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --spectrum-radio-font-size: var(--spectrum-font-size-300); +} + @media (forced-colors: active) { :host { + --highcontrast-radio-button-background-color: ButtonFace; --highcontrast-radio-neutral-content-color: CanvasText; --highcontrast-radio-neutral-content-color-hover: CanvasText; --highcontrast-radio-neutral-content-color-down: CanvasText; @@ -131,16 +264,8 @@ governing permissions and limitations under the License. ); } -:host([readonly]) #input:read-only { - 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%; +:host([readonly]) #input { + pointer-events: none; } :host([readonly][checked][disabled]) #input ~ #label, @@ -153,7 +278,6 @@ governing permissions and limitations under the License. var(--spectrum-radio-neutral-content-color) ) ); - margin-inline-start: auto; } :host([emphasized][checked]) #input + #button:before { diff --git a/packages/search/package.json b/packages/search/package.json index 353f6fbc77..13b131b0e8 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/textfield": "^1.0.3" }, "devDependencies": { - "@spectrum-css/search": "8.0.0-s2-foundations.17" + "@spectrum-css/search": "^8.0.0-s2-foundations.19" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index 26d7b4c95f..64dbaedde9 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -27,65 +27,23 @@ --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='s']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-s-border-radius); +:host([size='m']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-m-border-radius); --spectrum-search-edge-to-visual: var( - --system-search-size-s-edge-to-visual + --system-search-size-m-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='m']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-m-border-radius); +:host([size='s']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-s-border-radius); --spectrum-search-edge-to-visual: var( - --system-search-size-m-edge-to-visual + --system-search-size-s-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='l']) #textfield { @@ -93,9 +51,6 @@ --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 { @@ -103,21 +58,4 @@ --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); } diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 1f4b8fb36b..7c6e4deee6 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -11,27 +11,51 @@ 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 #button .spectrum-ClearButton-fill { - forced-color-adjust: none; - background-color: initial; - } -} - #textfield { + --spectrum-search-inline-size: var(--spectrum-field-width); + --spectrum-search-block-size: var(--spectrum-component-height-100); --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-field-minimum-width-multiplier) * var(--spectrum-search-block-size) ); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); + --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-search-font-weight: var(--spectrum-regular-font-weight); + --spectrum-search-font-style: var(--spectrum-default-font-style); + --spectrum-search-line-height: var(--spectrum-line-height-100); + --spectrum-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); + --spectrum-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-search-border-width: var(--spectrum-border-width-100); + --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); --mod-textfield-font-family: var( --mod-search-font-family, var(--spectrum-search-font-family) @@ -135,6 +159,39 @@ governing permissions and limitations under the License. ); } +:host([size='s']) { + --spectrum-search-block-size: var(--spectrum-component-height-75); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); +} + +:host([size='l']) { + --spectrum-search-block-size: var(--spectrum-component-height-200); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); +} + +:host([size='xl']) { + --spectrum-search-block-size: var(--spectrum-component-height-300); + --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); +} + +@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 #button .spectrum-ClearButton-fill { + forced-color-adjust: none; + background-color: initial; + } +} + #button { position: absolute; inset-block-start: 0; @@ -259,32 +316,23 @@ governing permissions and limitations under the License. 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-end: var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) ); } :host([quiet]) { - --spectrum-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-background-color: transparent; + --spectrum-search-background-color-disabled: transparent; + --spectrum-search-border-color-disabled: var( + --spectrum-disabled-border-color ); + --mod-search-border-radius: 0; + --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); } -:host([quiet]) #button { - transform: translateX( - var( - --mod-search-quiet-button-offset, - var(--spectrum-search-quiet-button-offset) - ) - ); -} - -:host([quiet]) #textfield .input { +:host([quiet]) .input { border-radius: var( --mod-search-border-radius, var(--spectrum-search-border-radius) @@ -298,14 +346,8 @@ governing permissions and limitations under the License. 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-quiet-button-offset, - var(--spectrum-search-quiet-button-offset) - ) + padding-inline-end: var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) ); } diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 11fb8152a6..fb24a60538 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -83,7 +83,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/sidenav": "6.0.0-s2-foundations.15" + "@spectrum-css/sidenav": "^6.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css index 2fa5cb6821..c60ce3f0ac 100644 --- a/packages/sidenav/src/sidenav-heading-overrides.css +++ b/packages/sidenav/src/sidenav-heading-overrides.css @@ -12,47 +12,6 @@ /* 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 ); @@ -74,109 +33,4 @@ --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 - ); -} - -#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 - ); -} - -#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 - ); } diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css index 2fa5cb6821..c60ce3f0ac 100644 --- a/packages/sidenav/src/sidenav-item-overrides.css +++ b/packages/sidenav/src/sidenav-item-overrides.css @@ -12,47 +12,6 @@ /* 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 ); @@ -74,109 +33,4 @@ --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 - ); -} - -#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 - ); -} - -#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 - ); } diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css index aa58dbbc26..f4ee62977b 100644 --- a/packages/sidenav/src/sidenav-overrides.css +++ b/packages/sidenav/src/sidenav-overrides.css @@ -12,47 +12,6 @@ /* 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 ); @@ -74,109 +33,4 @@ --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 - ); -} - -: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 - ); -} - -: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 - ); } diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index cf11a8385a..266732577d 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -18,6 +18,96 @@ governing permissions and limitations under the License. } #list { + --spectrum-sidenav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-sidenav-min-height: var(--spectrum-component-height-100); + --spectrum-sidenav-width: 100%; + --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); + --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); + --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); + --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); + --spectrum-sidenav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); + --spectrum-sidenav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-sidenav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --spectrum-sidenav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --spectrum-sidenav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --spectrum-sidenav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --spectrum-sidenav-background-disabled: transparent; + --spectrum-sidenav-background-default: transparent; + --spectrum-sidenav-header-color: var(--spectrum-gray-600); + --spectrum-sidenav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-sidenav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); + --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); + --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); + --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); flex-direction: column; margin: 0; padding: 0; @@ -25,6 +115,16 @@ governing permissions and limitations under the License. display: flex; } +#list:lang(ja), +#list:lang(ko), +#list:lang(zh) { + --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-sidenav-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); +} + #heading { padding-inline: var( --mod-sidenav-inline-padding, @@ -34,6 +134,7 @@ governing permissions and limitations under the License. --mod-sidenav-header-color, var(--spectrum-sidenav-header-color) ); + font-family: var(--spectrum-sidenav-header-font-family); font-size: var( --mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size) diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index cf619e7cd1..deb7e609c2 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -36,6 +36,96 @@ governing permissions and limitations under the License. } #list { + --spectrum-sidenav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-sidenav-min-height: var(--spectrum-component-height-100); + --spectrum-sidenav-width: 100%; + --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); + --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); + --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); + --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); + --spectrum-sidenav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); + --spectrum-sidenav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-sidenav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --spectrum-sidenav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --spectrum-sidenav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --spectrum-sidenav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --spectrum-sidenav-background-disabled: transparent; + --spectrum-sidenav-background-default: transparent; + --spectrum-sidenav-header-color: var(--spectrum-gray-600); + --spectrum-sidenav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-sidenav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); + --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); + --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); + --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); flex-direction: column; margin: 0; padding: 0; @@ -43,6 +133,16 @@ governing permissions and limitations under the License. display: flex; } +#list:lang(ja), +#list:lang(ko), +#list:lang(zh) { + --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-sidenav-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); +} + :host { margin-inline: 0; list-style-type: none; @@ -50,11 +150,8 @@ governing permissions and limitations under the License. :host([disabled]) #item-link { background-color: var( - --highcontrast-sidenav-background-disabled, - var( - --mod-sidenav-background-disabled, - var(--spectrum-sidenav-background-disabled) - ) + --mod-sidenav-background-disabled, + var(--spectrum-sidenav-background-disabled) ); color: var( --highcontrast-sidenav-content-disabled-color, @@ -130,11 +227,8 @@ governing permissions and limitations under the License. var(--spectrum-sidenav-border-radius) ); background-color: var( - --highcontrast-sidenav-background-default, - var( - --mod-sidenav-background-default, - var(--spectrum-sidenav-background-default) - ) + --mod-sidenav-background-default, + var(--spectrum-sidenav-background-default) ); color: var( --highcontrast-sidenav-content-color-default, @@ -288,15 +382,13 @@ governing permissions and limitations under the License. ) ); color: var( - --highcontrast-sidenav-content-color-key-focus, - var( - --mod-sidenav-content-color-key-focus, - var(--spectrum-sidenav-content-color-key-focus) - ) + --mod-sidenav-content-color-key-focus, + var(--spectrum-sidenav-content-color-key-focus) ); } #item-link[data-level] { + color: var(--highcontrast-sidenav-top-level-font-color); font-family: var( --mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family) diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css index 77cb05b687..d15d32b8d7 100644 --- a/packages/sidenav/src/spectrum-sidenav.css +++ b/packages/sidenav/src/spectrum-sidenav.css @@ -18,9 +18,109 @@ governing permissions and limitations under the License. } :host { + --spectrum-sidenav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-sidenav-min-height: var(--spectrum-component-height-100); + --spectrum-sidenav-width: 100%; + --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); + --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); + --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); + --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); + --spectrum-sidenav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); + --spectrum-sidenav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-sidenav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --spectrum-sidenav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --spectrum-sidenav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --spectrum-sidenav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --spectrum-sidenav-background-disabled: transparent; + --spectrum-sidenav-background-default: transparent; + --spectrum-sidenav-header-color: var(--spectrum-gray-600); + --spectrum-sidenav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-sidenav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --spectrum-sidenav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-sidenav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); + --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); + --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); + --spectrum-sidenav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); + --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); + --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); + --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); flex-direction: column; margin: 0; padding: 0; list-style-type: none; display: flex; } + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-sidenav-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); +} diff --git a/packages/slider/package.json b/packages/slider/package.json index ab67f2dac0..29196acf41 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -84,7 +84,7 @@ "@spectrum-web-components/theme": "^1.0.3" }, "devDependencies": { - "@spectrum-css/slider": "6.0.0-s2-foundations.17" + "@spectrum-css/slider": "^6.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css index e32dc04442..0da04aa632 100644 --- a/packages/slider/src/slider-overrides.css +++ b/packages/slider/src/slider-overrides.css @@ -49,167 +49,34 @@ --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 - ); } :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='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..033766d084 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -12,12 +12,27 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --spectrum-slider-control-height: var(--spectrum-component-height-100); + --spectrum-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --spectrum-slider-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-inline-size: 18px; + --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-slider-min-size: var(--spectrum-spacing-900); + --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); + --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); --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 ); @@ -25,12 +40,45 @@ governing permissions and limitations under the License. var(--spectrum-slider-controls-margin) * -1 ); --spectrum-slider-track-middle-handleoffset: calc( - var(--spectrum-slider-track-handleoffset) + - var(--spectrum-slider-handle-size) / 2 + var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) / + 2 ); --spectrum-slider-input-top-size: calc( var(--spectrum-slider-handle-size) / -2 / 4 ); + --spectrum-slider-track-fill-thickness: var( + --spectrum-slider-track-thickness + ); + --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); + --spectrum-slider-tick-mark-border-radius: 2px; + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --spectrum-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + --spectrum-slider-input-left: calc( + var(--spectrum-slider-handle-margin-left) / 4 + ); + --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --spectrum-slider-range-track-reset: 0; z-index: 0; min-inline-size: var( --mod-slider-min-size, @@ -53,11 +101,63 @@ governing permissions and limitations under the License. margin-block-start: calc( var( --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) + var(--spectrum-slider-ramp-track-height) ) / 2 ); } +:host([size='s']) { + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); + --spectrum-slider-control-height: var(--spectrum-component-height-75); + --spectrum-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --spectrum-slider-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); +} + +:host([size='l']) { + --spectrum-slider-font-size: var(--spectrum-font-size-100); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); + --spectrum-slider-control-height: var(--spectrum-component-height-200); + --spectrum-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --spectrum-slider-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-inline-size: 18px; +} + +:host([size='xl']) { + --spectrum-slider-font-size: var(--spectrum-font-size-200); + --spectrum-slider-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --spectrum-slider-control-height: var(--spectrum-component-height-300); + --spectrum-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --spectrum-slider-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-value-inline-size: 22px; +} + .spectrum-Slider--sideLabel { align-items: center; display: flex; @@ -139,39 +239,6 @@ governing permissions and limitations under the License. ); } -: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( @@ -236,13 +303,6 @@ governing permissions and limitations under the License. ); } -.track:before { - 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, @@ -281,6 +341,31 @@ governing permissions and limitations under the License. inset-inline: auto; } +.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; +} + +.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)) + ); +} + :host([variant='range']) #value { -webkit-user-select: text; user-select: text; @@ -339,55 +424,10 @@ governing permissions and limitations under the License. ); } -: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; -} - -.fill:before { - 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)) - ); -} - #ramp { block-size: var( --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) + var(--spectrum-slider-ramp-track-height) ); position: absolute; inset-inline-start: var( @@ -406,16 +446,6 @@ governing permissions and limitations under the License. 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) - ) - ); -} - .handle { z-index: 2; box-sizing: border-box; @@ -447,21 +477,7 @@ governing permissions and limitations under the License. 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; @@ -480,13 +496,6 @@ governing permissions and limitations under the License. --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, @@ -498,14 +507,6 @@ governing permissions and limitations under the License. .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( @@ -525,6 +526,14 @@ governing permissions and limitations under the License. var(--spectrum-animation-duration-100) ) ease-out; + inline-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); + block-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); border-radius: 100%; display: block; position: absolute; @@ -538,16 +547,6 @@ governing permissions and limitations under the License. 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) - ) - ); -} - .handle.handle-highlight:before { inline-size: calc( var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + @@ -559,36 +558,9 @@ governing permissions and limitations under the License. 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) - ) - ); } .input { - pointer-events: none; - cursor: default; inline-size: var( --mod-slider-handle-size, var(--spectrum-slider-handle-size) @@ -597,9 +569,10 @@ governing permissions and limitations under the License. --mod-slider-handle-size, var(--spectrum-slider-handle-size) ); + opacity: 0; + cursor: default; appearance: none; - opacity: 0.000001; - background: none; + pointer-events: none; border: 0; margin: 0; padding: 0; @@ -623,13 +596,6 @@ governing permissions and limitations under the License. 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, @@ -666,6 +632,36 @@ governing permissions and limitations under the License. padding-inline-end: 0; } +:host([variant='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) + ); +} + .ticks { z-index: 0; margin-inline: var( @@ -713,13 +709,6 @@ governing permissions and limitations under the License. --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; @@ -796,6 +785,13 @@ governing permissions and limitations under the License. overflow: hidden; } +.track:before { + background: var( + --highcontrast-slider-track-color-static, + var(--mod-slider-track-color, var(--spectrum-slider-track-color)) + ); +} + .track:not(:has(~ .spectrum-Slider-fill)):before { background: var( --highcontrast-slider-track-color, @@ -803,7 +799,18 @@ governing permissions and limitations under the License. ); } -:host([variant='filled']) .track:first-child:before { +#label-container { + color: var( + --highcontrast-slider-label-text-color, + var( + --mod-slider-label-text-color, + var(--spectrum-slider-label-text-color) + ) + ); +} + +:host([variant='filled']) .track:first-child:before, +.fill:before { background: var( --highcontrast-slider-filled-track-fill-color, var( @@ -813,14 +820,66 @@ governing permissions and limitations under the License. ); } -:host([variant='ramp']) .handle { +#ramp path { + fill: var( + --highcontrast-slider-ramp-track-color, + var( + --mod-slider-ramp-track-color, + var(--spectrum-slider-ramp-track-color) + ) + ); +} + +.handle { + border-color: var( + --highcontrast-slider-handle-border-color, + var( + --mod-slider-handle-border-color, + var(--spectrum-slider-handle-border-color) + ) + ); background: var( - --mod-slider-ramp-handle-background-color, + --highcontrast-slider-handle-background-color, var( - --highcontrast-slider-ramp-handle-background-color, - var(--spectrum-slider-ramp-handle-background-color) + --mod-slider-handle-background-color, + var(--spectrum-slider-handle-background-color) ) ); +} + +.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) + ) + ); +} + +.handle.handle-highlight:before { + 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, +.handle:active { + border-color: var( + --highcontrast-slider-handle-border-color-down, + var( + --mod-slider-handle-border-color-down, + var(--spectrum-slider-handle-border-color-down) + ) + ); +} + +:host([variant='ramp']) .handle { box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var( --highcontrast-slider-ramp-handle-border-color-active, @@ -829,6 +888,54 @@ governing permissions and limitations under the License. var(--spectrum-slider-ramp-handle-border-color-active) ) ); + background: var( + --mod-slider-ramp-handle-background-color, + var( + --highcontrast-slider-ramp-handle-background-color, + var(--spectrum-slider-ramp-handle-background-color) + ) + ); +} + +.input { + background: none; +} + +.tick:after { + background-color: var( + --highcontrast-slider-tick-mark-color, + var( + --mod-slider-tick-mark-color, + var(--spectrum-slider-tick-mark-color) + ) + ); +} + +.handle.dragging { + 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) + ) + ); +} + +: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) + ) + ); } :host([disabled]), @@ -848,15 +955,6 @@ governing permissions and limitations under the License. } :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( @@ -864,9 +962,22 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-border-color-disabled) ) ); + background: var( + --highcontrast-slider-handle-disabled-background-color, + var( + --mod-slider-handle-disabled-background-color, + var(--spectrum-slider-handle-disabled-background-color) + ) + ); + cursor: default; + pointer-events: none; } :host([disabled]) .handle:active { + border-color: var( + --mod-disabled-border-color, + var(--spectrum-disabled-border-color) + ); background: var( --highcontrast-slider-handle-background-color-disabled, var( @@ -874,10 +985,6 @@ governing permissions and limitations under the License. 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) { @@ -892,6 +999,10 @@ governing permissions and limitations under the License. } :host([disabled]) .handle:hover { + border-color: var( + --mod-disabled-border-color, + var(--spectrum-disabled-border-color) + ); background: var( --highcontrast-slider-handle-background-color-disabled, var( @@ -899,13 +1010,6 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-background-color-disabled) ) ); - border-color: var( - --highcontrast-disabled-border-color, - var( - --mod-disabled-border-color, - var(--spectrum-disabled-border-color) - ) - ); } } @@ -966,7 +1070,6 @@ governing permissions and limitations under the License. --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; @@ -1012,7 +1115,6 @@ governing permissions and limitations under the License. .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; @@ -1026,7 +1128,6 @@ governing permissions and limitations under the License. .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; @@ -1035,7 +1136,7 @@ governing permissions and limitations under the License. } :host([disabled]) #ramp + .handle { - background-color: ButtonFace; fill: ButtonFace; + background-color: ButtonFace; } } diff --git a/packages/split-view/package.json b/packages/split-view/package.json index 97a97e000d..8057bb5822 100644 --- a/packages/split-view/package.json +++ b/packages/split-view/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/splitview": "6.0.0-s2-foundations.15" + "@spectrum-css/splitview": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index bd59407e2e..dde22d73c7 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -12,6 +12,25 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-splitview-vertical-width: 100%; + --spectrum-splitview-vertical-gripper-width: 50%; + --spectrum-splitview-vertical-gripper-outer-width: 100%; + --spectrum-splitview-vertical-gripper-reset: 0; + --spectrum-splitview-content-color: var(--spectrum-body-color); + --spectrum-splitview-handle-background-color-hover: var( + --spectrum-gray-400 + ); + --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); + --spectrum-splitview-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --spectrum-splitview-handle-width: var(--spectrum-border-width-200); + --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); + --spectrum-splitview-gripper-height: 16px; + --spectrum-splitview-gripper-border-width-horizontal: 3px; + --spectrum-splitview-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); display: flex; overflow: hidden; } diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css index fbe86f0b75..66e2ffee0f 100644 --- a/packages/split-view/src/split-view-overrides.css +++ b/packages/split-view/src/split-view-overrides.css @@ -12,46 +12,13 @@ /* 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 - ); } diff --git a/packages/status-light/package.json b/packages/status-light/package.json index ca6fefc7cf..d0f1c447dd 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/statuslight": "8.0.0-s2-foundations.15" + "@spectrum-css/statuslight": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 801a523072..e78098eecb 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -11,7 +11,159 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([dir]), +:host { + --spectrum-statuslight-height: var(--spectrum-component-height-100); + --spectrum-statuslight-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --spectrum-statuslight-font-size: var(--spectrum-font-size-100); + --spectrum-statuslight-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --spectrum-statuslight-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); +} + +:host([size='s']) { + --spectrum-statuslight-height: var(--spectrum-component-height-75); + --spectrum-statuslight-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --spectrum-statuslight-font-size: var(--spectrum-font-size-75); + --spectrum-statuslight-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --spectrum-statuslight-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); +} + +:host([size='l']) { + --spectrum-statuslight-height: var(--spectrum-component-height-200); + --spectrum-statuslight-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --spectrum-statuslight-font-size: var(--spectrum-font-size-200); + --spectrum-statuslight-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --spectrum-statuslight-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); +} + +:host([size='xl']) { + --spectrum-statuslight-height: var(--spectrum-component-height-300); + --spectrum-statuslight-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --spectrum-statuslight-font-size: var(--spectrum-font-size-300); + --spectrum-statuslight-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --spectrum-statuslight-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); +} + :host([dir]) { + --spectrum-statuslight-corner-radius: 50%; + --spectrum-statuslight-font-weight: 400; + --spectrum-statuslight-border-width: var(--spectrum-border-width-100); + --spectrum-statuslight-line-height: var(--spectrum-line-height-100); + --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-statuslight-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-statuslight-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-statuslight-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --spectrum-statuslight-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --spectrum-statuslight-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --spectrum-statuslight-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --spectrum-statuslight-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --spectrum-statuslight-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --spectrum-statuslight-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --spectrum-statuslight-nonsemantic-red-color: var( + --spectrum-red-visual-color + ); + --spectrum-statuslight-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --spectrum-statuslight-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --spectrum-statuslight-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --spectrum-statuslight-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --spectrum-statuslight-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --spectrum-statuslight-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --spectrum-statuslight-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --spectrum-statuslight-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --spectrum-statuslight-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --spectrum-statuslight-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --spectrum-statuslight-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --spectrum-statuslight-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); min-block-size: var( --mod-statuslight-height, var(--spectrum-statuslight-height) @@ -21,6 +173,7 @@ governing permissions and limitations under the License. --mod-statuslight-font-size, var(--spectrum-statuslight-font-size) ); + font-weight: 400; font-weight: var( --mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight) diff --git a/packages/swatch/package.json b/packages/swatch/package.json index faf36213c7..f45af2dbc4 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -77,8 +77,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/swatch": "7.0.0-s2-foundations.17", - "@spectrum-css/swatchgroup": "4.0.0-s2-foundations.15" + "@spectrum-css/swatch": "^7.0.0-s2-foundations.18", + "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index e0a56e8fc6..c3530973b5 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -12,26 +12,23 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75); justify-content: flex-start; align-items: flex-start; gap: var( --mod-swatchgroup-spacing-regular, - var(--spectrum-swatchgroup-spacing-regular) + var(--spectrum-swatchgroup-spacing) ); flex-flow: wrap; display: inline-flex; } :host([density='compact']) { - gap: var( - --mod-swatchgroup-spacing-compact, - var(--spectrum-swatchgroup-spacing-compact) - ); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-compact); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-50); } :host([density='spacious']) { - gap: var( - --mod-swatchgroup-spacing-spacious, - var(--spectrum-swatchgroup-spacing-spacious) - ); + --mod-swatchgroup-spacing-regular: var(--mod-swatchgroup-spacing-spacious); + --spectrum-swatchgroup-spacing: var(--spectrum-spacing-100); } diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index 2af7c1ac63..46bc43c75c 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -31,7 +31,66 @@ governing permissions and limitations under the License. } } +:host, +:host([size='s']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); +} + +:host([size='xs']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); +} + +:host { + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --spectrum-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); +} + +:host([size='l']) { + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --spectrum-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); +} + :host { + --spectrum-swatch-focus-indicator-border-radius: 8px; + --spectrum-swatch-icon-border-color-rgb: 0, 0, 0; + --spectrum-swatch-icon-border-color-opacity: 0.51; + --spectrum-swatch-icon-border-color: rgba( + var(--spectrum-swatch-icon-border-color-rgb), + var(--spectrum-swatch-icon-border-color-opacity) + ); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); + --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); + --spectrum-swatch-border-thickness-selected: var( + --spectrum-border-width-200 + ); + --spectrum-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); + --spectrum-swatch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); -webkit-user-select: none; @@ -296,11 +355,8 @@ governing permissions and limitations under the License. var(--spectrum-swatch-border-thickness) ) var( - --highcontrast-swatch-border-color-light, - var( - --mod-swatch-border-color-light, - var(--spectrum-swatch-border-color-light) - ) + --mod-swatch-border-color-light, + var(--spectrum-swatch-border-color-light) ); } diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index edd3e96b84..18da9bc2fc 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -11,89 +11,12 @@ */ /* 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='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 { - --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); } diff --git a/packages/switch/package.json b/packages/switch/package.json index 1cf7dce698..a989b3bf5d 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -63,7 +63,7 @@ "@spectrum-web-components/checkbox": "^1.0.3" }, "devDependencies": { - "@spectrum-css/switch": "6.0.0-s2-foundations.16" + "@spectrum-css/switch": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index 2dcc0d89f1..79b0367f78 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -12,10 +12,157 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --spectrum-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --spectrum-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --spectrum-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); --spectrum-switch-focus-indicator-thickness: var( --mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness) ); + --spectrum-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); +} + +:host([disabled]) { + --spectrum-switch-label-color-default: var( + --spectrum-disabled-content-color + ); +} + +:host([emphasized]) { + --spectrum-switch-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --spectrum-switch-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --spectrum-switch-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --spectrum-switch-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-switch-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --spectrum-switch-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); +} + +:host, +:host { + --spectrum-switch-min-height: var(--spectrum-component-height-100); + --spectrum-switch-control-width: var( + --spectrum-switch-control-width-medium + ); + --spectrum-switch-control-height: var( + --spectrum-switch-control-height-medium + ); + --spectrum-switch-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --spectrum-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --spectrum-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-switch-font-size: var(--spectrum-font-size-100); +} + +:host([size='s']) { + --spectrum-switch-min-height: var(--spectrum-component-height-75); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); + --spectrum-switch-control-height: var( + --spectrum-switch-control-height-small + ); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); + --spectrum-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --spectrum-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-switch-font-size: var(--spectrum-font-size-75); +} + +:host([size='l']) { + --spectrum-switch-min-height: var(--spectrum-component-height-200); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); + --spectrum-switch-control-height: var( + --spectrum-switch-control-height-large + ); + --spectrum-switch-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --spectrum-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --spectrum-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-switch-font-size: var(--spectrum-font-size-200); +} + +:host([size='xl']) { + --spectrum-switch-min-height: var(--spectrum-component-height-300); + --spectrum-switch-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --spectrum-switch-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --spectrum-switch-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --spectrum-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --spectrum-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-switch-font-size: var(--spectrum-font-size-300); +} + +:host { min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); max-inline-size: 100%; vertical-align: top; @@ -296,10 +443,7 @@ governing permissions and limitations under the License. box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) + var(--spectrum-switch-focus-indicator-thickness) ) var( --highcontrast-switch-focus-indicator-color, @@ -395,11 +539,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-switch-background-color-disabled, + var(--spectrum-switch-background-color-disabled) ); } @@ -462,10 +603,7 @@ governing permissions and limitations under the License. box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) + var(--spectrum-switch-focus-indicator-thickness) ) var( --highcontrast-switch-focus-indicator-color, @@ -540,11 +678,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-switch-background-color-disabled, + var(--spectrum-switch-background-color-disabled) ); } @@ -630,39 +765,39 @@ governing permissions and limitations under the License. :host([disabled][checked]:hover) #input + #switch, :host([disabled][checked]:hover) #input + #switch { - background-color: GrayText; box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; } :host([disabled][checked]:hover) #input + #switch:before, :host([disabled][checked]:hover) #input + #switch:before { - background-color: ButtonFace; border-color: GrayText; + background-color: ButtonFace; } } :host([disabled]) #input:not(:checked) + #switch, :host([disabled]) #input:not(:checked) + #switch { - background-color: ButtonFace; box-shadow: inset 0 0 0 1px GrayText; + background-color: ButtonFace; } :host([disabled]) #input:not(:checked) + #switch:before, :host([disabled]) #input:not(:checked) + #switch:before { - background-color: ButtonFace; border-color: GrayText; + background-color: ButtonFace; } :host([disabled][checked]) #input + #switch, :host([disabled][checked]) #input + #switch { - background-color: GrayText; box-shadow: inset 0 0 0 1px GrayText; + background-color: GrayText; } :host([disabled][checked]) #input + #switch:before, :host([disabled][checked]) #input + #switch:before { - background-color: ButtonFace; border-color: GrayText; + background-color: ButtonFace; } :host([disabled]) #input ~ #label, diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css index bf96e33c37..2c9acc64d1 100644 --- a/packages/switch/src/switch-overrides.css +++ b/packages/switch/src/switch-overrides.css @@ -36,149 +36,11 @@ --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 - ); -} - -: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 - ); -} - -: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); -} - -: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); } diff --git a/packages/table/package.json b/packages/table/package.json index 9f63dd990c..af6fc72b83 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -129,7 +129,7 @@ "@spectrum-web-components/icons-ui": "^1.0.3" }, "devDependencies": { - "@spectrum-css/table": "7.0.0-s2-foundations.17" + "@spectrum-css/table": "^7.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css index 6ee65c89a5..7884d1d469 100644 --- a/packages/table/src/spectrum-table-body.css +++ b/packages/table/src/spectrum-table-body.css @@ -17,11 +17,12 @@ governing permissions and limitations under the License. var(--spectrum-table-border-radius) ); border: none; + display: table-row-group; position: relative; } :host([drop-target]) { - --spectrum-table-border-color: transparent; + --mod-table-border-color: transparent; outline-width: var( --mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness) @@ -35,7 +36,3 @@ governing permissions and limitations under the License. ) ); } - -:host { - display: table-row-group; -} diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css index 5ddcf20ffc..acb143a570 100644 --- a/packages/table/src/spectrum-table-cell.css +++ b/packages/table/src/spectrum-table-cell.css @@ -35,9 +35,6 @@ governing permissions and limitations under the License. --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, @@ -82,6 +79,7 @@ governing permissions and limitations under the License. } :host { + display: table-cell; position: relative; } @@ -128,10 +126,6 @@ governing permissions and limitations under the License. ); } -:host { - display: table-cell; -} - .spectrum-Table-cell--collapsible { padding-block: 0; padding-inline-start: calc( diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css index 0ffde28e3f..9485d0fd97 100644 --- a/packages/table/src/spectrum-table-checkbox-cell.css +++ b/packages/table/src/spectrum-table-checkbox-cell.css @@ -98,9 +98,6 @@ governing permissions and limitations under the License. --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, @@ -146,6 +143,7 @@ governing permissions and limitations under the License. :host(:not([head-cell])), :host([head-cell]) { + display: table-cell; position: relative; } @@ -229,8 +227,3 @@ governing permissions and limitations under the License. var(--spectrum-table-header-checkbox-block-spacing) ); } - -: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..111e636581 100644 --- a/packages/table/src/spectrum-table-head-cell.css +++ b/packages/table/src/spectrum-table-head-cell.css @@ -152,6 +152,7 @@ governing permissions and limitations under the License. } :host { + display: table-cell; position: relative; } @@ -200,10 +201,6 @@ governing permissions and limitations under the License. ); } -:host { - display: table-cell; -} - :host .spectrum-Table-scroller { border-block-end: var( --mod-table-border-width, diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css index 85ff8f0591..209ac96538 100644 --- a/packages/table/src/spectrum-table-row.css +++ b/packages/table/src/spectrum-table-row.css @@ -92,6 +92,22 @@ governing permissions and limitations under the License. ); } +: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; +} + :host(:first-child) ::slotted(:first-child) { border-start-start-radius: var( --mod-table-border-radius, @@ -120,22 +136,6 @@ governing permissions and limitations under the License. ); } -: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; -} - :host(:first-child) { border-start-start-radius: var( --mod-table-border-radius, @@ -240,7 +240,7 @@ governing permissions and limitations under the License. } :host([drop-target]) { - --spectrum-table-border-color: var( + --mod-table-border-color: var( --highcontrast-table-focus-indicator-color, transparent ); @@ -520,11 +520,11 @@ governing permissions and limitations under the License. } .spectrum-Table-row--thumbnail { - --table-thumbnail-cell-block-spacing: var( + --spectrum-table-thumbnail-cell-block-spacing: var( --mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing) ); - --table-thumbnail-inner-content-block-spacing: max( + --spectrum-table-thumbnail-inner-content-block-spacing: max( 0px, calc( ( @@ -549,8 +549,8 @@ governing permissions and limitations under the License. .spectrum-Table-row--thumbnail ::slotted(*) { padding-block: calc( - var(--table-thumbnail-cell-block-spacing) + - var(--table-thumbnail-inner-content-block-spacing) + var(--spectrum-table-thumbnail-cell-block-spacing) + + var(--spectrum-table-thumbnail-inner-content-block-spacing) ); } @@ -559,7 +559,7 @@ governing permissions and limitations under the License. } .spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible { - --table-thumbnail-inner-minimum-block-spacing: max( + --spectrum-table-thumbnail-inner-minimum-block-spacing: max( 0px, calc( ( @@ -574,11 +574,11 @@ governing permissions and limitations under the License. ) / 2 ) ); - --table-thumbnail-cell-block-spacing: max( + --spectrum-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) + var(--spectrum-table-thumbnail-inner-minimum-block-spacing) ); } diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css index 5bd999c628..7575b15227 100644 --- a/packages/table/src/spectrum-table.css +++ b/packages/table/src/spectrum-table.css @@ -21,7 +21,6 @@ governing permissions and limitations under the License. --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; @@ -36,15 +35,104 @@ governing permissions and limitations under the License. :host { --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-inline-space: var(--spectrum-table-edge-to-content); + --spectrum-table-border-radius: var(--spectrum-corner-radius-100); + --spectrum-table-border-width: var(--spectrum-table-border-divider-width); + --spectrum-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --spectrum-table-default-vertical-align: top; + --spectrum-table-header-vertical-align: middle; + --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); + --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); + --spectrum-table-row-font-style: var(--spectrum-default-font-style); + --spectrum-table-row-line-height: var(--spectrum-line-height-100); + --spectrum-table-border-color: var(--spectrum-gray-300); + --spectrum-table-divider-color: var(--spectrum-gray-300); + --spectrum-table-header-background-color: var( + --spectrum-transparent-white-100 + ); + --spectrum-table-header-text-color: var(--spectrum-body-color); + --spectrum-table-row-background-color: var(--spectrum-gray-50); + --spectrum-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --spectrum-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --spectrum-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --spectrum-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --spectrum-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --spectrum-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --spectrum-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-table-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --spectrum-table-drop-zone-outline-color: var( + --spectrum-accent-visual-color + ); + --spectrum-table-transition-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); + --spectrum-table-section-header-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-table-section-header-background-color: var(--spectrum-gray-200); + --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --spectrum-table-collapsible-disclosure-inline-spacing: 0px; + --spectrum-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 ); --spectrum-table-cell-background-color: var( --highcontrast-table-row-background-color, @@ -69,6 +157,10 @@ governing permissions and limitations under the License. ) ) ); + --mod-thumbnail-size: var( + --mod-table-thumbnail-size, + var(--spectrum-table-thumbnail-size) + ); } :host:dir(rtl), @@ -76,226 +168,386 @@ governing permissions and limitations under the License. --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } -:host:not(.spectrum-Table-scroller) { - border-collapse: initial; - border-spacing: 0; +:host, +.spectrum-Table--sizeM { + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --spectrum-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --spectrum-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --spectrum-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --spectrum-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-row-font-size: var(--spectrum-font-size-100); + --spectrum-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --spectrum-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --spectrum-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --spectrum-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); + --spectrum-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); } -:host:not(.spectrum-Table-scroller) { - display: table; +:host([size='s']) { + --spectrum-table-min-header-height: var(--spectrum-component-height-100); + --spectrum-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --spectrum-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --spectrum-table-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --spectrum-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --spectrum-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-row-font-size: var(--spectrum-font-size-75); + --spectrum-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --spectrum-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --spectrum-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --spectrum-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); + --spectrum-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); } -:host([density='compact']) { +:host([size='l']) { + --spectrum-table-min-header-height: var(--spectrum-component-height-200); + --spectrum-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --spectrum-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --spectrum-table-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --spectrum-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --spectrum-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-table-row-font-size: var(--spectrum-font-size-200); + --spectrum-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --spectrum-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --spectrum-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --spectrum-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); + --spectrum-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); +} + +:host([size='xl']) { + --spectrum-table-min-header-height: var(--spectrum-component-height-300); + --spectrum-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --spectrum-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); --spectrum-table-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --spectrum-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --spectrum-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-row-font-size: var(--spectrum-font-size-300); + --spectrum-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --spectrum-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --spectrum-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --spectrum-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); + --spectrum-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); +} + +:host([density='compact']) { + --mod-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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: var( --mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800) ); @@ -319,17 +571,23 @@ governing permissions and limitations under the License. } :host([quiet]) { - --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --spectrum-table-outer-border-inline-width: var( + --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --mod-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: var( --mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100) ); - --spectrum-table-row-background-color: var( + --mod-table-row-background-color: var( --mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100) ); } + +:host:not(.spectrum-Table-scroller) { + border-collapse: initial; + border-spacing: 0; + display: table; +} diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css index b43c1c2bfa..d5bbf2e4fc 100644 --- a/packages/table/src/table-overrides.css +++ b/packages/table/src/table-overrides.css @@ -12,455 +12,27 @@ /* 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-border-color: var(--system-table-border-color); + --spectrum-table-divider-color: var(--system-table-divider-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='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([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='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='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='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([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-icon-color-focus: var(--system-table-icon-color-focus); + --spectrum-table-icon-color-focus-hover: var( + --system-table-icon-color-focus-hover ); } :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 ); diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 546ee6a058..2c872dad69 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -95,7 +95,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tabs": "6.0.0-s2-foundations.16" + "@spectrum-css/tabs": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tabs/src/spectrum-tabs-sizes.css b/packages/tabs/src/spectrum-tabs-sizes.css index 0794c4005b..0b1aca0e31 100644 --- a/packages/tabs/src/spectrum-tabs-sizes.css +++ b/packages/tabs/src/spectrum-tabs-sizes.css @@ -11,58 +11,134 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([size='s']) #list { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --spectrum-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --spectrum-tabs-font-size: var(--spectrum-font-size-75); +} + +:host([size='l']) #list { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --spectrum-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --spectrum-tabs-font-size: var(--spectrum-font-size-200); +} + +:host([size='xl']) #list { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --spectrum-tabs-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --spectrum-tabs-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --spectrum-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --spectrum-tabs-font-size: var(--spectrum-font-size-300); +} + :host([size='s']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( + --mod-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: 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: 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: 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: var( --mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large) ); - --spectrum-tabs-top-to-text: var( + --mod-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: 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: 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: 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: 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: 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: 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..ac9a2fb7c8 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -11,6 +11,133 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +#list { + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); + --spectrum-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --spectrum-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --spectrum-tabs-start-to-edge: var( + --spectrum-tab-item-start-to-edge-medium + ); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --spectrum-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --spectrum-tabs-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --spectrum-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --spectrum-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --spectrum-tabs-color-disabled: var(--spectrum-gray-500); + --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-tabs-font-style: var(--spectrum-default-font-style); + --spectrum-tabs-font-size: var(--spectrum-font-size-100); + --spectrum-tabs-line-height: var(--spectrum-line-height-100); + --spectrum-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --spectrum-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --spectrum-tabs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-tabs-list-background-direction: top; + --spectrum-tabs-divider-size: var(--spectrum-border-width-200); + --spectrum-tabs-divider-border-radius: 1px; + --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); +} + +:host([emphasized]) #list { + --mod-tabs-color-selected: var( + --mod-tabs-color-selected-emphasized, + var(--spectrum-accent-content-color-default) + ); + --mod-tabs-color-hover: var( + --mod-tabs-color-hover-emphasized, + var(--spectrum-accent-content-color-hover) + ); + --mod-tabs-color-key-focus: var( + --mod-tabs-color-key-focus-emphasized, + var(--spectrum-accent-content-color-key-focus) + ); + --mod-tabs-selection-indicator-color: var( + --mod-tabs-selection-indicator-color-emphasized, + var(--spectrum-accent-content-color-default) + ); +} + +:host([direction^='vertical']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); +} + +:host([direction^='vertical-right']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical-right, + 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([compact]) #list { + --mod-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-medium) + ); + --mod-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --mod-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --mod-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) + ); +} + #list { z-index: 0; vertical-align: top; @@ -37,25 +164,6 @@ governing permissions and limitations under the License. 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) - ); -} - ::slotted([selected]:not([slot])) { color: var( --highcontrast-tabs-color-selected, @@ -128,17 +236,7 @@ governing permissions and limitations under the License. } :host([quiet]) #selection-indicator { - 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 - ); + padding-inline-start: var(--mod-tabs-start-to-item-quiet); } :host([direction^='vertical']) #list, @@ -193,52 +291,10 @@ governing permissions and limitations under the License. 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 #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-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) - ); -} - @media (forced-colors: active) { #list { --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); diff --git a/packages/tabs/src/tabs-overrides.css b/packages/tabs/src/tabs-overrides.css index 0b371c8780..5c94b2e019 100644 --- a/packages/tabs/src/tabs-overrides.css +++ b/packages/tabs/src/tabs-overrides.css @@ -13,64 +13,7 @@ /* 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); -} - -: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 - ); } diff --git a/packages/tags/package.json b/packages/tags/package.json index 440fbff8c9..b9d32ad336 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -74,8 +74,8 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tag": "10.0.0-s2-foundations.15", - "@spectrum-css/taggroup": "6.0.0-s2-foundations.15" + "@spectrum-css/tag": "^10.0.0-s2-foundations.16", + "@spectrum-css/taggroup": "^6.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 403695cb53..3fedc55749 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -11,6 +11,228 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-avatar-opacity-disabled: 0.3; + --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tag-border-width: var(--spectrum-border-width-100); + --spectrum-tag-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-tag-label-line-height: var(--spectrum-line-height-100); + --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --spectrum-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --spectrum-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); + --spectrum-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --spectrum-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --spectrum-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --spectrum-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --spectrum-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --spectrum-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --spectrum-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --spectrum-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --spectrum-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --spectrum-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --spectrum-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --spectrum-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --spectrum-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); + --spectrum-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --spectrum-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --spectrum-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --spectrum-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --spectrum-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --spectrum-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --spectrum-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --spectrum-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --spectrum-tag-content-color-emphasized: var(--spectrum-white); + --spectrum-tag-content-color-disabled: var( + --spectrum-disabled-content-color + ); +} + +:host, +:host { + --spectrum-tag-height: var(--spectrum-component-height-100); + --spectrum-tag-font-size: var(--spectrum-font-size-100); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --spectrum-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --spectrum-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --spectrum-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --spectrum-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --spectrum-tag-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --spectrum-tag-size-medium-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --spectrum-tag-size-medium-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --spectrum-tag-size-medium-clear-button-spacing-inline-end + ); +} + +:host([size='s']) { + --spectrum-tag-height: var(--spectrum-component-height-75); + --spectrum-tag-font-size: var(--spectrum-font-size-75); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --spectrum-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --spectrum-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --spectrum-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tag-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --spectrum-tag-size-small-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --spectrum-tag-size-small-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --spectrum-tag-size-small-clear-button-spacing-inline-end + ); +} + +:host([size='l']) { + --spectrum-tag-height: var(--spectrum-component-height-200); + --spectrum-tag-font-size: var(--spectrum-font-size-200); + --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --spectrum-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --spectrum-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); + --spectrum-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --spectrum-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --spectrum-tag-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --spectrum-tag-size-large-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --spectrum-tag-size-large-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --spectrum-tag-size-large-clear-button-spacing-inline-end + ); +} + :host { border-color: var( --highcontrast-tag-border-color, diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css index 1af81362f9..0df4a93691 100644 --- a/packages/tags/src/spectrum-tags.css +++ b/packages/tags/src/spectrum-tags.css @@ -12,6 +12,8 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { + --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); + --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); flex-wrap: wrap; margin: 0; padding: 0; diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css index e26f789802..7e58954d0a 100644 --- a/packages/tags/src/tag-overrides.css +++ b/packages/tags/src/tag-overrides.css @@ -12,19 +12,6 @@ /* 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 @@ -35,10 +22,26 @@ --spectrum-tag-background-color-focus: var( --system-tag-background-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-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-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-content-color-selected: var( + --system-tag-content-color-selected + ); --spectrum-tag-border-color-selected: var( --system-tag-border-color-selected ); @@ -84,273 +87,4 @@ --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 { - --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 - ); } diff --git a/packages/textfield/package.json b/packages/textfield/package.json index c715ae62a9..f899367911 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/textfield": "8.0.0-s2-foundations.16" + "@spectrum-css/textfield": "^8.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 88a6b3d23c..44ac878292 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -11,8 +11,339 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#textfield { +:host { --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); + --spectrum-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-textfield-width: 240px; + --spectrum-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --spectrum-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --spectrum-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --spectrum-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); + --spectrum-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --spectrum-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --spectrum-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-textfield-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --spectrum-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --spectrum-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --spectrum-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --spectrum-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --spectrum-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --spectrum-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --spectrum-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --spectrum-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --spectrum-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --spectrum-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); + --spectrum-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --spectrum-textfield-icon-color-valid: var( + --spectrum-positive-visual-color + ); + --spectrum-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --spectrum-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); +} + +#textfield, +:host { + --spectrum-textfield-height: var(--spectrum-component-height-100); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-75 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); +} + +:host([size='s']) { + --spectrum-textfield-height: var(--spectrum-component-height-75); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-75 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); +} + +:host([size='l']) { + --spectrum-textfield-height: var(--spectrum-component-height-200); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-100 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); +} + +:host([size='xl']) { + --spectrum-textfield-height: var(--spectrum-component-height-300); + --spectrum-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); + --spectrum-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --spectrum-textfield-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --spectrum-textfield-character-count-font-size: var( + --spectrum-font-size-200 + ); + --spectrum-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --spectrum-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); +} + +#textfield { text-overflow: ellipsis; inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); grid-template-rows: auto auto auto; @@ -98,11 +429,8 @@ governing permissions and limitations under the License. :host([valid]) #textfield .icon { color: var( - --highcontrast-textfield-icon-color-valid, - var( - --mod-textfield-icon-color-valid, - var(--spectrum-textfield-icon-color-valid) - ) + --mod-textfield-icon-color-valid, + var(--spectrum-textfield-icon-color-valid) ); inset-block-start: var( --mod-textfield-icon-spacing-block-valid, @@ -128,11 +456,8 @@ governing permissions and limitations under the License. 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) - ) + --mod-textfield-icon-color-invalid, + var(--spectrum-textfield-icon-color-invalid) ); inset-block-start: var( --mod-textfield-icon-spacing-block-invalid, @@ -284,6 +609,11 @@ governing permissions and limitations under the License. --mod-textfield-background-color, var(--spectrum-textfield-background-color) ); + border-width: var( + --mod-textfield-border-width, + var(--spectrum-textfield-border-width) + ); + border-style: solid; border-color: var( --highcontrast-textfield-border-color, var( @@ -291,11 +621,6 @@ governing permissions and limitations under the License. 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) @@ -397,11 +722,8 @@ governing permissions and limitations under the License. .input:focus, .input:focus::placeholder { color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) + --mod-textfield-text-color-focus, + var(--spectrum-textfield-text-color-focus) ); } @@ -650,11 +972,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-textfield-border-color-focus-hover, + var(--spectrum-textfield-border-color-focus-hover) ); } @@ -663,11 +982,8 @@ governing permissions and limitations under the License. .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) - ) + --mod-textfield-text-color-focus-hover, + var(--spectrum-textfield-text-color-focus-hover) ); } @@ -686,11 +1002,8 @@ governing permissions and limitations under the License. :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) - ) + --mod-textfield-border-color-invalid-focus-hover, + var(--spectrum-textfield-border-color-invalid-focus-hover) ); } @@ -826,6 +1139,7 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { + --highcontrast-textfield-border-color: CanvasText; --highcontrast-textfield-border-color-hover: Highlight; --highcontrast-textfield-border-color-focus: Highlight; --highcontrast-textfield-border-color-keyboard-focus: CanvasText; diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css index 8b6f36a225..27a8c4cb72 100644 --- a/packages/textfield/src/textfield-overrides.css +++ b/packages/textfield/src/textfield-overrides.css @@ -26,390 +26,7 @@ --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 { - --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='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/toast/package.json b/packages/toast/package.json index 1eac8a7c85..1e45c884ee 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/toast": "11.0.0-s2-foundations.15" + "@spectrum-css/toast": "^11.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index 06a2738fbe..53976f8304 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -11,6 +11,53 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); + --spectrum-toast-font-size: var(--spectrum-font-size-100); + --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-toast-block-size: var(--spectrum-toast-height); + --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --spectrum-toast-border-width: var(--spectrum-border-width-100); + --spectrum-toast-line-height: var(--spectrum-line-height-100); + --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --spectrum-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-bottom-edge-to-divider: var( + --spectrum-spacing-100 + ); + --spectrum-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --spectrum-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); + --spectrum-toast-spacing-top-edge-to-text: var( + --spectrum-toast-top-to-text + ); + --spectrum-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --spectrum-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --spectrum-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --spectrum-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --spectrum-toast-text-and-icon-color: var(--spectrum-white); +} + @media (forced-colors: active) { :host { --highcontrast-toast-border-color: ButtonText; @@ -43,18 +90,12 @@ governing permissions and limitations under the License. ); -webkit-font-smoothing: antialiased; background-color: var( - --highcontrast-toast-background-color-default, - var( - --mod-toast-background-color-default, - var(--spectrum-toast-background-color-default) - ) + --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) - ) + --mod-toast-background-color-default, + var(--spectrum-toast-background-color-default) ); overflow-wrap: anywhere; flex-direction: row; @@ -68,64 +109,46 @@ governing permissions and limitations under the License. :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) - ) + --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) - ) + --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) - ) + --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) - ) + --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) - ) + --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) - ) + --mod-toast-positive-background-color-default, + var(--spectrum-toast-positive-background-color-default) ); } @@ -146,11 +169,8 @@ governing permissions and limitations under the License. .content, .type { color: var( - --highcontrast-toast-text-and-icon-color, - var( - --mod-toast-text-and-icon-color, - var(--spectrum-toast-text-and-icon-color) - ) + --mod-toast-text-and-icon-color, + var(--spectrum-toast-text-and-icon-color) ); } diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css index 3e680e0ee0..3c3af9c044 100644 --- a/packages/toast/src/toast-overrides.css +++ b/packages/toast/src/toast-overrides.css @@ -15,59 +15,5 @@ --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/package.json b/packages/tooltip/package.json index e57bcba559..c704726d43 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -68,7 +68,7 @@ "@spectrum-web-components/shared": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tooltip": "7.0.0-s2-foundations.15" + "@spectrum-css/tooltip": "^7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 5f133656b3..93313d0073 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -50,6 +50,61 @@ governing permissions and limitations under the License. ); } +#tooltip { + --spectrum-tooltip-animation-duration: var( + --spectrum-animation-duration-100 + ); + --spectrum-tooltip-margin: 0px; + --spectrum-tooltip-height: var(--spectrum-component-height-75); + --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); + --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-font-size: var(--spectrum-font-size-75); + --spectrum-tooltip-line-height: var(--spectrum-line-height-100); + --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tooltip-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --spectrum-tooltip-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --spectrum-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --spectrum-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --spectrum-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --spectrum-tooltip-content-color: var(--spectrum-white); + --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); + --spectrum-tooltip-tip-height-percentage: 50%; + --spectrum-tooltip-tip-antialiasing-inset: 0.5px; + --spectrum-tooltip-pointer-corner-spacing: var( + --spectrum-corner-radius-100 + ); + --spectrum-tooltip-background-color-default: var( + --spectrum-tooltip-backgound-color-default-neutral + ); +} + @media (forced-colors: active) { #tooltip { border: 1px solid #0000; diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css index 8688f61963..c0152cf3a9 100644 --- a/packages/tooltip/src/tooltip-overrides.css +++ b/packages/tooltip/src/tooltip-overrides.css @@ -15,58 +15,4 @@ --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/package.json b/packages/tray/package.json index 529b46ff65..38ab8c54b7 100644 --- a/packages/tray/package.json +++ b/packages/tray/package.json @@ -65,7 +65,7 @@ "@spectrum-web-components/underlay": "^1.0.1" }, "devDependencies": { - "@spectrum-css/tray": "4.0.0-s2-foundations.15" + "@spectrum-css/tray": "^4.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css index b805794541..1c778d426d 100644 --- a/packages/tray/src/spectrum-tray.css +++ b/packages/tray/src/spectrum-tray.css @@ -12,66 +12,69 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .tray { + --spectrum-tray-max-inline-size: var(--mod-tray-max-inline-size, 375px); + --spectrum-tray-spacing-edge-to-tray-safe-zone: var( + --mod-tray-spacing-edge-to-tray-safe-zone, + 64px + ); + --spectrum-tray-entry-animation-delay: var( + --mod-tray-entry-animation-delay, + 0.16s + ); + --spectrum-tray-entry-animation-duration: var( + --mod-tray-entry-animation-duration, + var(--spectrum-animation-duration-500) + ); + --spectrum-tray-exit-animation-delay: var( + --mod-tray-exit-animation-delay, + 0s + ); + --spectrum-tray-exit-animation-duration: var( + --mod-tray-exit-animation-duration, + var(--spectrum-animation-duration-100) + ); + --spectrum-tray-corner-radius: var( + --mod-tray-corner-radius, + var(--spectrum-corner-radius-100) + ); + --spectrum-tray-background-color: var( + --highcontrast-tray-background-color, + var( + --mod-tray-background-color, + var(--spectrum-background-layer-2-color) + ) + ); --mod-modal-max-width: 100%; inline-size: 100%; max-inline-size: 100%; + max-block-size: calc(100vh - 64px); max-block-size: calc( - 100vh - - var( - --mod-tray-spacing-edge-to-tray-safe-zone, - var(--spectrum-tray-spacing-edge-to-tray-safe-zone) - ) + 100vh - 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 + opacity var(--spectrum-tray-exit-animation-duration) + cubic-bezier(0.5, 0, 1, 1) 0s, + visibility var(--spectrum-tray-exit-animation-duration) linear + calc(var(--spectrum-tray-exit-animation-duration)), + transform var(--spectrum-tray-exit-animation-duration) + cubic-bezier(0.5, 0, 1, 1) 0s; + transition: + opacity var(--spectrum-tray-exit-animation-duration) + cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay), + visibility 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) - ) + var(--spectrum-tray-exit-animation-delay) + + 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)) - ); + transform var(--spectrum-tray-exit-animation-duration) + cubic-bezier(0.5, 0, 1, 1) var(--spectrum-tray-exit-animation-delay); + 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) - ); + margin-block-start: 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) @@ -86,43 +89,20 @@ governing permissions and limitations under the License. :host([open]) .tray { transition: - transform - var( - --mod-tray-entry-animation-duration, - var(--spectrum-tray-entry-animation-duration) - ) + transform 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) - ) + var(--spectrum-tray-entry-animation-delay), + opacity 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) - ); + 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) - ); + max-inline-size: var(--spectrum-tray-max-inline-size); + border-start-start-radius: var(--spectrum-tray-corner-radius); + border-start-end-radius: var(--spectrum-tray-corner-radius); } } diff --git a/packages/underlay/package.json b/packages/underlay/package.json index bea192adc7..f6cff25dc0 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/underlay": "5.0.0-s2-foundations.15" + "@spectrum-css/underlay": "^5.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index e2732e8653..ceeddd9250 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -12,76 +12,50 @@ 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) - ); -} - -: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) + --spectrum-underlay-background-exit-animation-duration: var( + --mod-underlay-background-exit-animation-duration, + var(--spectrum-animation-duration-300) ); -} - -:host { - background-color: var( + --spectrum-underlay-background-exit-animation-ease: var( + --mod-underlay-background-exit-animation-ease, + var(--spectrum-animation-ease-in) + ); + --spectrum-underlay-background-exit-animation-delay: var( + --mod-underlay-background-exit-animation-delay, + var(--spectrum-animation-duration-200) + ); + --spectrum-underlay-background-entry-animation-duration: var( + --mod-underlay-background-entry-animation-duration, + var(--spectrum-animation-duration-600) + ); + --spectrum-underlay-background-entry-animation-ease: var( + --mod-underlay-background-entry-animation-ease, + var(--spectrum-animation-ease-out) + ); + --spectrum-underlay-background-entry-animation-delay: var( + --mod-underlay-background-entry-animation-delay, + var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0) + ) + ); + --spectrum-underlay-background-color: var( --mod-underlay-background-color, - var(--spectrum-underlay-background-color) + rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)) ); + pointer-events: none; + visibility: hidden; + opacity: 0; + 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) - ), + opacity var(--spectrum-underlay-background-exit-animation-duration) + var(--spectrum-underlay-background-exit-animation-ease) + 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 - ) - ) + var(--spectrum-underlay-background-exit-animation-delay) + + var(--spectrum-underlay-background-exit-animation-duration) ); position: fixed; inset-block: 0; @@ -90,17 +64,12 @@ governing permissions and limitations under the License. } :host([open]) { + pointer-events: auto; + visibility: visible; + opacity: 1; 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) - ); + var(--spectrum-underlay-background-entry-animation-duration) + var(--spectrum-underlay-background-entry-animation-ease) + var(--spectrum-underlay-background-entry-animation-delay); + transition-delay: var(--spectrum-underlay-background-entry-animation-delay); } diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 4edfb61ece..0c26de0097 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -116,16 +116,18 @@ const processCSS = async ( const processTypography = async ( baseSrcPath, - overridesSrcPath, dstPath, identifier, from, usedVariables = undefined ) => { const baseData = fs.readFileSync(baseSrcPath, 'utf8'); - const overridesData = fs.readFileSync(overridesSrcPath, 'utf8'); - const data = baseData + overridesData; - const result = await processCSSData(data, identifier, from, usedVariables); + const result = await processCSSData( + baseData, + identifier, + from, + usedVariables + ); fs.writeFileSync(dstPath, result, 'utf8'); const fontPath = path.resolve( @@ -215,19 +217,11 @@ async function processSpectrumVars() { 'dist' ); const baseSrcPath = path.join(typographyPath, 'index-base.css'); - const overridesSrcPath = path.join(typographyPath, 'index-theme.css'); const dstPath = path.resolve( path.join(__dirname, '..', 'tools', 'styles', 'typography.css') ); console.log(`processing typography`); - processes.push( - processTypography( - baseSrcPath, - overridesSrcPath, - dstPath, - 'typography' - ) - ); + processes.push(processTypography(baseSrcPath, dstPath, 'typography')); } await Promise.all(processes).then(() => { diff --git a/scripts/update-spectrum-css.js b/scripts/update-spectrum-css.js index 979419b626..618256ed13 100644 --- a/scripts/update-spectrum-css.js +++ b/scripts/update-spectrum-css.js @@ -1,4 +1,5 @@ #!/usr/bin/env node +/* eslint-disable no-inner-declarations */ /* Copyright 2020 Adobe. All rights reserved. @@ -16,7 +17,9 @@ import { readFileSync, writeFileSync } from 'fs'; import latestVersion from 'latest-version'; import fg from 'fast-glob'; -const useLatest = process.argv[2] === '--latest'; +// What tag to target, defaults to latest +// Example: `node scripts/update-spectrum-css.js s2-foundations` will target the latest version of the s2-foundations tag +const targetTag = process.argv[2]; async function update() { let updated = false; @@ -30,9 +33,17 @@ async function update() { ); async function updateDependency(packageName, depType) { if (packageName.startsWith('@spectrum-css')) { + // don't update the version if the package name includes -s2 or -v2 + if ( + packageName.includes('-s2') || + packageName.includes('-v2') + ) { + return; + } + const currentVersion = packageJSON[depType][packageName]; const targetVersion = await latestVersion(packageName, { - version: useLatest ? 'latest' : currentVersion, + version: targetTag ? targetTag : 'latest', }); const targetRange = `^${targetVersion}`; if (currentVersion.replace('^', '') !== targetVersion) { diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 9905d36792..87021681c9 100644 --- a/tools/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -48,7 +48,7 @@ "@spectrum-web-components/base": "^1.0.1" }, "devDependencies": { - "@spectrum-css/opacitycheckerboard": "3.0.0-s2-foundations.13" + "@spectrum-css/opacitycheckerboard": "^3.0.0-s2-foundations.17" }, "types": "./src/opacity-checkerboard.d.ts", "sideEffects": [ diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css index 844adb9d69..12e9222e01 100644 --- a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css @@ -15,33 +15,63 @@ governing permissions and limitations under the License. background: repeating-conic-gradient( var( --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) + var(--spectrum-opacity-checkerboard-square-light) ) 0 25%, var( --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) + var(--spectrum-opacity-checkerboard-square-dark) ) 0 50% ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / + 0 0 / calc( var( --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) + var(--spectrum-opacity-checkerboard-square-size) ) * 2 ) calc( var( --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) + var(--spectrum-opacity-checkerboard-square-size) ) * 2 ); } +@supports ( + background: + repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg) +) { + :host { + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-square-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-square-dark) + ) + 0 50% + ) + var(--mod-opacity-checkerboard-position, left top) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-square-size) + ) * 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-square-size) + ) * 2 + ); + } +} + @media (forced-colors: active) { :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..970f827f9b 100644 --- a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -15,33 +15,63 @@ governing permissions and limitations under the License. background: repeating-conic-gradient( var( --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) + var(--spectrum-opacity-checkerboard-square-light) ) 0 25%, var( --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) + var(--spectrum-opacity-checkerboard-square-dark) ) 0 50% ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / + 0 0 / calc( var( --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) + var(--spectrum-opacity-checkerboard-square-size) ) * 2 ) calc( var( --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) + var(--spectrum-opacity-checkerboard-square-size) ) * 2 ); } +@supports ( + background: + repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg) +) { + .opacity-checkerboard { + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-square-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-square-dark) + ) + 0 50% + ) + var(--mod-opacity-checkerboard-position, left top) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-square-size) + ) * 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-square-size) + ) * 2 + ); + } +} + @media (forced-colors: active) { .opacity-checkerboard { forced-color-adjust: none; diff --git a/tools/styles/fonts.css b/tools/styles/fonts.css index ef47aa872e..69c9fcf474 100755 --- a/tools/styles/fonts.css +++ b/tools/styles/fonts.css @@ -1252,167 +1252,3 @@ 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--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--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--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--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--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--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--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--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-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--sizeXS { - --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--sizeM { - --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--sizeXL { - --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--sizeXXXL { - --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--sizeS { - --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--sizeL { - --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-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--sizeXS { - --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--sizeM { - --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--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); -} diff --git a/tools/styles/tokens-v2/component-bridge.css b/tools/styles/tokens-v2/component-bridge.css index 30087d65d6..fbb2ded7fd 100644 --- a/tools/styles/tokens-v2/component-bridge.css +++ b/tools/styles/tokens-v2/component-bridge.css @@ -1,6043 +1,674 @@ :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator + --system-accordion-divider-color: var(--spectrum-gray-200); + --system-action-bar-popover-background-color: var(--spectrum-gray-25); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-50); + --system-action-button-background-color-hover: var(--spectrum-gray-100); + --system-action-button-background-color-down: var(--spectrum-gray-200); + --system-action-button-background-color-focus: var(--spectrum-gray-100); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-100 ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style + --system-action-button-content-color-selected: var(--spectrum-gray-50); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-100 ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-200 ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-100 ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-500 ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-600 ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-700 ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-600 ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-quiet-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-black-quiet-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-black-quiet-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-black-quiet-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-500 ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-600 ); - --system-accordion-divider-color: var(--spectrum-gray-200); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-700 ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-600 ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-quiet-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 + --system-action-button-static-white-quiet-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small + --system-action-button-static-white-quiet-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-action-button-static-white-quiet-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-asset-folder-background-color: var(--spectrum-gray-200); + --system-asset-file-background-color: var(--spectrum-gray-25); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-50); + --system-button-background-color-hover: var(--spectrum-gray-100); + --system-button-background-color-down: var(--spectrum-gray-200); + --system-button-background-color-focus: var(--spectrum-gray-100); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-200 ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-200 ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 + --system-button-secondary-background-color-default: var( + --spectrum-gray-100 ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-200 ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-200 ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-200 ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-200 ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-200 ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-1000 ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-600 ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large + --system-button-static-white-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-1000 ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-900 ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-1000 ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-1000 ); - --system-action-bar-popover-background-color: var(--spectrum-gray-25); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-1000 ); - --system-action-button-background-color-default: var(--spectrum-gray-50); - --system-action-button-background-color-hover: var(--spectrum-gray-100); - --system-action-button-background-color-down: var(--spectrum-gray-200); - --system-action-button-background-color-focus: var(--spectrum-gray-100); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-300 ); - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-100 + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-200 + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-100 + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-600 ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-button-static-black-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-400 + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-static-black-background-color-down: var( + --system-button-static-black-outline-not-secondary-border-color-default: var( --spectrum-transparent-black-500 ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-400 + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-600 ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-500 + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-700 ); - --system-action-button-static-black-border-color-hover: var( + --system-button-static-black-outline-not-secondary-border-color-focus: var( --spectrum-transparent-black-600 ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-checkmark-color: var(--spectrum-gray-50); + --system-checkbox-control-corner-radius: 2px; + --system-card-border-color: var(--spectrum-gray-100); + --system-card-border-color-hover: var(--spectrum-gray-200); + --system-card-divider-color: var(--spectrum-gray-200); + --system-card-preview-background-color: var(--spectrum-gray-100); + --system-card-preview-background-color-hover: var(--spectrum-gray-200); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-100); + --system-close-button-background-color-down: var(--spectrum-gray-200); + --system-close-button-background-color-focus: var(--spectrum-gray-100); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-900 + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-1000 + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-1000 + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-1000 + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-300 + --system-color-wheel-border-color: var(--spectrum-transparent-black-300); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-800); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --system-combobox-border-color-key-focus: var(--spectrum-gray-800); + --system-combobox-background-color-disabled: var(--spectrum-gray-25); + --system-divider-background-color-small: var(--spectrum-gray-200); + --system-divider-background-color-medium: var(--spectrum-gray-200); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-900 ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-400 ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-400 ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( + --system-divider-background-color-large-static-black: var( --spectrum-transparent-black-900 ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 + --system-drop-zone-border-color: var(--spectrum-gray-200); + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 + --system-infield-button-background-color: var(--spectrum-gray-50); + --system-infield-button-background-color-hover: var(--spectrum-gray-100); + --system-infield-button-background-color-down: var(--spectrum-gray-200); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-100 ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( + --system-modal-background-color: var(--spectrum-background-layer-2-color); + --system-picker-background-color-default: var(--spectrum-gray-100); + --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-800); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-900); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-900); + --system-picker-border-color-disabled: var(--spectrum-gray-300); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-button-background-color: var(--spectrum-gray-50); + --system-picker-button-background-color-hover: var(--spectrum-gray-100); + --system-picker-button-background-color-down: var(--spectrum-gray-200); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-progress-bar-track-color: var(--spectrum-gray-200); + --system-progress-bar-track-color-white: var( --spectrum-transparent-white-400 ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-background-color-focus: var( + --system-progress-circle-track-border-color: var(--spectrum-gray-200); + --system-progress-circle-track-border-color-over-background: var( --spectrum-transparent-white-400 ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-700 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-background-color-down: var( + --system-progress-circle-fill-border-color-over-background: var( --spectrum-transparent-white-1000 ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-1000 + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-background-color: var(--spectrum-gray-25); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-300 + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black + --system-side-nav-background-hover: var(--spectrum-gray-100); + --system-side-nav-item-background-down: var(--spectrum-gray-200); + --system-side-nav-background-key-focus: var(--spectrum-gray-100); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-100 ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 + --system-side-nav-background-hover-selected: var(--spectrum-gray-200); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 + --system-slider-track-corner-radius: 2px; + --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-500 ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-500 ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) + --system-split-view-background-color: var(--spectrum-gray-75); + --system-split-view-handle-background-color: var(--spectrum-gray-200); + --system-split-view-gripper-border-radius: 2px; + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-default: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-25); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus ); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover ); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; + --system-swatch-border-color: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-swatch-border-color-opacity) ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-200); - --system-asset-file-background-color: var(--spectrum-gray-25); - --system-asset-icon-outline-color: var(--spectrum-gray-500); - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-radius: var(--spectrum-corner-radius-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); - --system-button-background-color-default: var(--spectrum-gray-50); - --system-button-background-color-hover: var(--spectrum-gray-100); - --system-button-background-color-down: var(--spectrum-gray-200); - --system-button-background-color-focus: var(--spectrum-gray-100); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-gray-25); - --system-button-primary-content-color-hover: var(--spectrum-gray-25); - --system-button-primary-content-color-down: var(--spectrum-gray-25); - --system-button-primary-content-color-focus: var(--spectrum-gray-25); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-100 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-200); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-200); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-50); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-100); - --system-card-border-color-hover: var(--spectrum-gray-200); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-200); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var(--spectrum-gray-100); - --system-card-preview-background-color-hover: var(--spectrum-gray-200); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-500) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-background-color: transparent; - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-100); - --system-close-button-background-color-down: var(--spectrum-gray-200); - --system-close-button-background-color-focus: var(--spectrum-gray-100); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); - --system-divider-background-color-small: var(--spectrum-gray-200); - --system-divider-background-color-medium: var(--spectrum-gray-200); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-900 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-900 - ); - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-200); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-background-color: var(--spectrum-gray-50); - --system-infield-button-background-color-hover: var(--spectrum-gray-100); - --system-infield-button-background-color-down: var(--spectrum-gray-200); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-100 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-meter-width); - --system-meter-top-to-text: var(--spectrum-component-top-to-text); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-background-layer-2-color); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-background-color-default: var(--spectrum-gray-50); - --system-picker-background-color-default-open: var(--spectrum-gray-100); - --system-picker-background-color-active: var(--spectrum-gray-200); - --system-picker-background-color-hover: var(--spectrum-gray-100); - --system-picker-background-color-hover-open: var(--spectrum-gray-100); - --system-picker-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); - --system-picker-button-background-color: var(--spectrum-gray-50); - --system-picker-button-background-color-hover: var(--spectrum-gray-100); - --system-picker-button-background-color-down: var(--spectrum-gray-200); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-500 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-200); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-400 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-progress-circle-track-border-color: var(--spectrum-gray-200); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-400 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-1000 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-25); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-100); - --system-side-nav-item-background-down: var(--spectrum-gray-200); - --system-side-nav-background-key-focus: var(--spectrum-gray-100); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-100 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-200); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: 2px; - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-75); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-200); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-25); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-100 - ); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); --system-swatch-disabled-icon-color: var(--spectrum-gray-25); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-200); - --system-switch-background-color-disabled: var(--spectrum-gray-200); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-50); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-200); - --system-table-divider-color: var(--spectrum-gray-200); - --system-table-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-25); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-100); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-100); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-25 - ); - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-200); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large + --system-switch-background-color: var(--spectrum-gray-200); + --system-switch-background-color-disabled: var(--spectrum-gray-200); + --system-switch-handle-background-color: var(--spectrum-gray-50); + --system-table-header-background-color: var( + --spectrum-transparent-white-25 ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default + --system-table-border-color: var(--spectrum-gray-200); + --system-table-divider-color: var(--spectrum-gray-200); + --system-table-row-background-color: var(--spectrum-gray-25); + --system-table-summary-row-background-color: var(--spectrum-gray-100); + --system-table-section-header-background-color: var(--spectrum-gray-100); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-color-hover ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-25 ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-25 ); - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tabs-font-weight: var(--spectrum-regular-font-weight); + --system-tabs-divider-background-color: var(--spectrum-gray-200); --system-tag-background-color: var(--spectrum-gray-50); --system-tag-background-color-hover: var(--spectrum-gray-50); --system-tag-background-color-active: var(--spectrum-gray-100); --system-tag-background-color-focus: var(--spectrum-gray-50); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); --system-tag-content-color: var( --spectrum-neutral-subdued-content-color-default ); @@ -6050,6 +681,7 @@ --system-tag-content-color-focus: var( --spectrum-neutral-subdued-content-color-key-focus ); + --system-tag-content-color-selected: var(--spectrum-gray-25); --system-tag-border-color-selected: var( --spectrum-neutral-subdued-background-color-default ); @@ -6093,762 +725,21 @@ --system-tag-size-large-clear-button-spacing-inline-end: var( --spectrum-component-edge-to-visual-200 ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-25); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); --system-textfield-border-color: var(--spectrum-gray-500); --system-textfield-border-color-hover: var(--spectrum-gray-600); --system-textfield-border-color-focus: var(--spectrum-gray-800); --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-25); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: 2px; --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-400); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); - --system-tray-exit-animation-delay: 0s; - --system-tray-entry-animation-delay: 0.16s; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); --system-heading-sans-serif-font-family: var( --spectrum-sans-font-family-stack ); diff --git a/tools/styles/tokens/express/component-bridge.css b/tools/styles/tokens/express/component-bridge.css index 2d2544d923..e1f2056682 100644 --- a/tools/styles/tokens/express/component-bridge.css +++ b/tools/styles/tokens/express/component-bridge.css @@ -1,5185 +1,613 @@ :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-200 ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-selected: var(--spectrum-gray-75); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight + --system-action-button-static-black-background-color-default: var( + --spectrum-transparent-black-200 ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style + --system-action-button-static-black-quiet-background-color-default: var( + --spectrum-transparent-black-200 ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) + --system-action-button-static-black-quiet-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) + --system-action-button-static-black-quiet-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-black-quiet-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-background-color-default: var( + --spectrum-transparent-white-200 ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-quiet-background-color-default: var( + --spectrum-transparent-white-200 ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-white-quiet-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-quiet-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 + --system-action-button-static-white-quiet-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 + --system-action-group-vertical-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs + --system-alert-banner-neutral-background: var( + --spectrum-neutral-background-color-default ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small + --system-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-800 ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 ); - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-background-color-disabled: var( - --spectrum-disabled-background-color + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-border-color-disabled: transparent; - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-300 + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-400 + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-300 + --system-button-static-black-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 + --system-button-static-black-outline-not-secondary-border-color-default: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-600 ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-button-static-black-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-button-static-black-outline-secondary-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-button-static-black-outline-secondary-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white + --system-button-static-black-outline-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-preview-background-color: var( + --spectrum-background-base-color ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-200 + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-background-color-hover: var( + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-black-static-background-color-hover: var( --spectrum-transparent-black-300 ); - --system-action-button-static-black-background-color-down: var( + --system-close-button-static-black-static-background-color-down: var( --spectrum-transparent-black-400 ); - --system-action-button-static-black-background-color-focus: var( + --system-close-button-static-black-static-background-color-focus: var( --spectrum-transparent-black-300 ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-selected-background-color-default: var( + --system-divider-background-color-large-static-black: var( --spectrum-transparent-black-800 ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var( + --spectrum-corner-radius-75 ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 + --system-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-300 ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 + --system-modal-background-color: var(--spectrum-gray-100); + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-color-disabled: transparent; + --system-picker-border-width: 0px; + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-200 + --system-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 ); - --system-action-button-static-white-background-color-hover: var( + --system-picker-button-border-width: 0px; + --system-popover-border-width: 0; + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-track-color-white: var( --spectrum-transparent-white-300 ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-track-border-color-over-background: var( --spectrum-transparent-white-300 ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( + --system-progress-circle-fill-border-color-over-background: var( --spectrum-transparent-white-900 ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-radio-button-background-color: var(--spectrum-gray-75); + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-border-radius: calc( + var(--spectrum-component-height-100) / 2 ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) + --system-search-size-m-border-radius: calc( + var(--spectrum-component-height-100) / 2 ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 + --system-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 + --system-search-size-m-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium + --system-search-size-s-border-radius: calc( + var(--spectrum-component-height-75) / 2 ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 + --system-search-size-s-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 + --system-search-size-l-border-radius: calc( + var(--spectrum-component-height-200) / 2 ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 + --system-search-size-l-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 + --system-search-size-xl-border-radius: calc( + var(--spectrum-component-height-300) / 2 ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); - --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-vertical-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-alert-banner-neutral-background: var( - --spectrum-neutral-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-radius: var(--spectrum-corner-radius-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); - --system-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-border-color-disabled: transparent; - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-control-color-default: var(--spectrum-gray-800); - --system-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-checkbox-control-color-down: var(--spectrum-gray-900); - --system-checkbox-control-color-focus: var(--spectrum-gray-900); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); - --system-clear-button-background-color: var(--spectrum-gray-200); - --system-clear-button-background-color-hover: var(--spectrum-gray-300); - --system-clear-button-background-color-down: var(--spectrum-gray-400); - --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-background-color: transparent; - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-300); - --system-close-button-background-color-down: var(--spectrum-gray-400); - --system-close-button-background-color-focus: var(--spectrum-gray-300); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); - --system-combobox-border-color-default: var(--spectrum-gray-400); - --system-combobox-border-color-hover: var(--spectrum-gray-500); - --system-combobox-border-color-focus: var(--spectrum-gray-900); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --system-combobox-border-color-key-focus: var(--spectrum-gray-900); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); - --system-infield-button-border-width: 0; - --system-infield-button-border-color: transparent; - --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-background-color: var(--spectrum-gray-200); - --system-infield-button-background-color-hover: var(--spectrum-gray-300); - --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-300 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-background-color-default: var(--spectrum-gray-200); - --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-width: 0px; - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); - --system-picker-button-background-color: var(--spectrum-gray-200); - --system-picker-button-background-color-hover: var(--spectrum-gray-300); - --system-picker-button-background-color-down: var(--spectrum-gray-400); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-button-border-color: none; - --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 - ); - --system-picker-button-border-width: 0px; - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); - --system-popover-border-width: 0; - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); - --system-radio-button-border-color-default: var(--spectrum-gray-800); - --system-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-radio-button-border-color-down: var(--spectrum-gray-900); - --system-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-search-border-color-default: var(--spectrum-gray-400); - --system-search-border-color-hover: var(--spectrum-gray-500); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-size-s-border-radius: calc( - var(--spectrum-component-height-75) / 2 - ); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-size-m-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-l-border-radius: calc( - var(--spectrum-component-height-200) / 2 - ); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: calc( - var(--spectrum-component-height-300) / 2 - ); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-600); - --system-slider-ramp-track-color: var(--spectrum-gray-300); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-border-color: var(--spectrum-gray-800); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-900); - --system-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-default: var(--spectrum-gray-400); --system-stepper-border-color-hover: var(--spectrum-gray-500); --system-stepper-border-color-focus: var(--spectrum-gray-800); --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); --system-stepper-buttons-border-style: solid; --system-stepper-buttons-border-width: var(--spectrum-border-width-200); --system-stepper-buttons-border-color: transparent; @@ -5187,857 +615,75 @@ --system-stepper-buttons-border-color-hover: transparent; --system-stepper-buttons-border-color-focus: transparent; --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); --system-stepper-button-border-width: 0; - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-300 - ); --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-hover-invalid: transparent; --system-stepper-border-color-focus-invalid: transparent; --system-stepper-border-color-focus-hover-invalid: transparent; --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); --system-stepper-button-border-width-disabled: 0; --system-stepper-buttons-background-color-disabled: var( --spectrum-disabled-background-color ); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) + var(--spectrum-gray-1000-rgb), + var(--spectrum-swatch-border-color-opacity) ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; - --system-switch-handle-border-color-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-900 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-900 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); - --system-tabs-font-weight: var(--spectrum-bold-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-800 ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-900 ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-900 ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 ); - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); --system-tag-size-medium-corner-radius: var( --spectrum-component-height-100 ); --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); --system-tag-content-color: var(--spectrum-neutral-content-color-default); --system-tag-content-color-hover: var( --spectrum-neutral-content-color-hover @@ -6048,6 +694,7 @@ --system-tag-content-color-focus: var( --spectrum-neutral-content-color-key-focus ); + --system-tag-content-color-selected: var(--spectrum-gray-50); --system-tag-border-color-selected: var( --spectrum-neutral-background-color-default ); @@ -6089,762 +736,21 @@ --system-tag-size-large-clear-button-spacing-inline-end: var( --spectrum-component-pill-edge-to-visual-200 ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); --system-textfield-border-color: var(--spectrum-gray-400); --system-textfield-border-color-hover: var(--spectrum-gray-500); --system-textfield-border-color-focus: var(--spectrum-gray-800); --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-200); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-300); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-background-color-default ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); - --system-tray-exit-animation-delay: 0s; - --system-tray-entry-animation-delay: 0.16s; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); --system-heading-sans-serif-font-family: var( --spectrum-sans-font-family-stack ); diff --git a/tools/styles/tokens/spectrum/component-bridge.css b/tools/styles/tokens/spectrum/component-bridge.css index 5d439bd793..2f1910f400 100644 --- a/tools/styles/tokens/spectrum/component-bridge.css +++ b/tools/styles/tokens/spectrum/component-bridge.css @@ -1,6045 +1,689 @@ :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-200 ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight + --system-action-button-content-color-selected: var(--spectrum-gray-75); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-200 ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-300 ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-200 ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-500 ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-600 ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-500 ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-quiet-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) + --system-action-button-static-black-quiet-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-black-quiet-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-black-quiet-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-400 ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-500 ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-600 ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-500 ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-quiet-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 + --system-action-button-static-white-quiet-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs + --system-action-button-static-white-quiet-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small + --system-action-button-static-white-quiet-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large + --system-button-static-white-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-800 ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-900 ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 ); - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 ); - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-300 + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-button-static-black-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-border-color-default: var( + --spectrum-transparent-black-400 ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-500 ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-600 ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 + --system-button-static-black-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-black-500 ); - --system-action-button-static-black-background-color-focus: var( + --system-button-static-black-outline-secondary-background-color-hover: var( --spectrum-transparent-black-300 ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: var( + --system-button-static-black-outline-secondary-background-color-down: var( --spectrum-transparent-black-400 ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-button-static-black-outline-secondary-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-preview-background-color: var( + --spectrum-background-base-color ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-800 + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-200 ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( + --system-modal-background-color: var(--spectrum-gray-100); + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-color-disabled: transparent; + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-track-color-white: var( --spectrum-transparent-white-300 ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-track-border-color-over-background: var( --spectrum-transparent-white-300 ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-400 + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-500 + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-button-background-color: var(--spectrum-gray-75); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-600 + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-500 + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-default: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-radius: var(--spectrum-corner-radius-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --system-clear-button-quiet-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --system-clear-button-quiet-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --system-clear-button-quiet-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); - --system-clear-button-over-background-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --system-clear-button-over-background-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --system-clear-button-over-background-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --system-clear-button-disabled-background-color: transparent; - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: ','; - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-200 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 - ); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-quiet: transparent; - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 ); --system-stepper-buttons-background-color-disabled: var( - --spectrum-gray-100 - ); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) + --spectrum-gray-100 ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) + --system-stepper-quiet-buttons-border-style: none; + --system-stepper-quiet-button-edge-to-fill: 0; + --system-swatch-border-color: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-swatch-border-color-opacity) ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; --system-switch-handle-border-color-default: var(--spectrum-gray-600); --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 ); - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-divider-background-color: var(--spectrum-gray-300); --system-tag-background-color: var(--spectrum-gray-75); --system-tag-background-color-hover: var(--spectrum-gray-75); --system-tag-background-color-active: var(--spectrum-gray-200); --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); --system-tag-content-color: var( --spectrum-neutral-subdued-content-color-default ); @@ -6052,6 +696,7 @@ --system-tag-content-color-focus: var( --spectrum-neutral-subdued-content-color-key-focus ); + --system-tag-content-color-selected: var(--spectrum-gray-50); --system-tag-border-color-selected: var( --spectrum-neutral-subdued-background-color-default ); @@ -6095,762 +740,21 @@ --system-tag-size-large-clear-button-spacing-inline-end: var( --spectrum-component-edge-to-visual-200 ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); --system-textfield-border-color: var(--spectrum-gray-500); --system-textfield-border-color-hover: var(--spectrum-gray-600); --system-textfield-border-color-focus: var(--spectrum-gray-800); --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-300); --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); - --system-tray-exit-animation-delay: 0s; - --system-tray-entry-animation-delay: 0.16s; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); --system-heading-sans-serif-font-family: var( --spectrum-sans-font-family-stack ); diff --git a/tools/styles/typography.css b/tools/styles/typography.css index ef47aa872e..69c9fcf474 100644 --- a/tools/styles/typography.css +++ b/tools/styles/typography.css @@ -1252,167 +1252,3 @@ 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--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--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--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--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--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--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--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--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-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--sizeXS { - --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--sizeM { - --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--sizeXL { - --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--sizeXXXL { - --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--sizeS { - --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--sizeL { - --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-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--sizeXS { - --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--sizeM { - --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--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); -} diff --git a/yarn.lock b/yarn.lock index f688bfd084..b086459573 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5298,330 +5298,325 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918" integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ== -"@spectrum-css/accordion@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-6.0.0-s2-foundations.16.tgz#cb4ed7f8467681c1f4366f9a2e02706dd5fc71e1" - integrity sha512-A3FnYMHXNJDYWWwQCTJwQblGUdpqdY4eDru8cq/Lf6SePhVaPtGeMyrESlyOYXTAdfmTJvvs0Ze6sKEXaY8jrw== - -"@spectrum-css/actionbar@9.0.0-s2-foundations.16": - version "9.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-9.0.0-s2-foundations.16.tgz#ee47b51174de82902f213bbcb184b15bf60e7d7e" - integrity sha512-zPZHtQ0ydhrgif5hnK6RnuD/DCr68MWs6ek4b/GaRnYATUNVtP0+jGM9FiyDxBha1u1PEZxAKmT7uOKyETuZ8w== - -"@spectrum-css/actionbutton@7.0.0-s2-foundations.22": - version "7.0.0-s2-foundations.22" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-7.0.0-s2-foundations.22.tgz#30ad63f7f323215f1ba9899a3d74abb1467e35fb" - integrity sha512-voPc0KdIB8aF3LmBiBg8yiR5NbffWbChtIS9V4hCicoD/pc202dFVaWOQGYp4DsDNLV2XzxA+brtPCYvNxfh4w== - -"@spectrum-css/actiongroup@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-6.0.0-s2-foundations.15.tgz#5ceca8b0d203ac8dbac6b58b67b1bc8822f3a2db" - integrity sha512-Bx8NJIm1OTVlHlPlrfOvxas2f5DHP/OeInxrcCwybZtQ2QgKsoWgVJQ2KME56qVNcGZEC9XRVWSdR5gGUWM1RA== - -"@spectrum-css/actionmenu@7.0.0-s2-foundations.15": - version "7.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-7.0.0-s2-foundations.15.tgz#ad44e24f3ca79097ee65f2d985608c323e523f11" - integrity sha512-WrTXmQDhQ7JU4if7GKtwwGJnF30wacVjbWhmTvj6/Dh7NT/N3Ztw3cN1isLW1Ojki6e7A+wzEm4yqMw7tbt8tg== - -"@spectrum-css/alertbanner@3.0.0-s2-foundations.16": - version "3.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/alertbanner/-/alertbanner-3.0.0-s2-foundations.16.tgz#d592bdac16e1cfa4cc565a81d926f5b61f853118" - integrity sha512-vNDMTHtWSKbaiz3BAEnuQWr/oIif/HzfUiHOYdOw7I5TjwKSMBnR/i5ah+6j8JmYxEbp/Yc/KpmhA7CEjmSlvw== - -"@spectrum-css/alertdialog@3.0.0-s2-foundations.15": - version "3.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/alertdialog/-/alertdialog-3.0.0-s2-foundations.15.tgz#569a184567100f8583028ef59ad0f6e958535c39" - integrity sha512-xTRWk8yohIBwqQHO1DaG8bxZFdVPI7hwZtzNHZyC17OI0ShcatpozLQNJ3DujwFhT7QUt/vDP9awt0/Z0WeBmA== - -"@spectrum-css/asset@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-6.0.0-s2-foundations.15.tgz#ce9cfa096c57a66d563c6afe087d91777bf6ebaa" - integrity sha512-/XgrjMeFxC0EW8UM+BoRnv5vouDDtn6jtB2T5AZGWHZB6T6xgR0JAGBbW4KVZAV2CPcHLpvv3nZJrC3FwuWQ9A== - -"@spectrum-css/avatar@8.0.0-s2-foundations.15": - version "8.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-8.0.0-s2-foundations.15.tgz#b9afbbdd703e687d940d9862021a879bb3afbf0f" - integrity sha512-ys1Fm+DO9CLDabK6pIhdqBY5CklYrY8cfPGGburj0gwveqDGo5sP3UlufnaOts2zCWAfpsG/vwzGPTGc+JI7Rg== - -"@spectrum-css/badge@5.0.0-s2-foundations.15": - version "5.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-5.0.0-s2-foundations.15.tgz#7cdd95382583a5637396b1af8d4ef9c04e807b77" - integrity sha512-WNI7vQuJ3cQtl0JDALVN1ohkgc+/na/nD3YDPck9FjMIKvKRbkgc6Ear8YP1B6Xp6PY9AOuxdUjA6yK/d5gvrw== - -"@spectrum-css/breadcrumb@10.0.0-s2-foundations.15": - version "10.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-10.0.0-s2-foundations.15.tgz#e2ab8a5248e5f7be2b1cdd45d1843170f7ed1e8d" - integrity sha512-yVKmdBf49bNPDBzfphu7/J2BViDEwvTCmKTz8Lzo2DrSonzyRc/ZwO58thr5+27sC77RKtrt+SFRdzzOFc1HOg== - -"@spectrum-css/button@14.0.0-s2-foundations.18": - version "14.0.0-s2-foundations.18" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-14.0.0-s2-foundations.18.tgz#3d51bab068cb70d8ef64eda2fd1f4b765a0c4022" - integrity sha512-u5LRGanBVT1neilx19Ij06NsleXu76Yrna721vC0knw/unUhbnZzPD0H2YUrVardgpK24V8g4cr3TOb8WgabWQ== - -"@spectrum-css/buttongroup@8.0.0-s2-foundations.15": - version "8.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-8.0.0-s2-foundations.15.tgz#a66a8dc0b2205622abc1d6f1bd43ecc53f826101" - integrity sha512-RRI7ACnsNz7EWoWDsZ62TpsFmHST6ciwJ0pB7PvDfs86YTxpYcTEU5KPpJdRE4dOXuwhG5BjWMAdwDNc23JbXQ== - -"@spectrum-css/card@10.0.0-s2-foundations.20": - version "10.0.0-s2-foundations.20" - resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-10.0.0-s2-foundations.20.tgz#f9b3a4133ade6e1fb56fcf0737fcd394a4866269" - integrity sha512-a4S9+UiRks25dKGWTxfFGgthGQsDtPN8n3W2Ph01vjurNUucgznCeFwkMWA9EltxYR1EIadWzcUNF9vvmmO4YQ== +"@spectrum-css/accordion@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-6.0.0-s2-foundations.17.tgz#1da1eaa3491be7bf502d7132bdd739c17027efc5" + integrity sha512-yviX9MF5EHmERqICjh3jooPJxn2Xwprp8bI53+1MwrLdMq2L8bw05uqfT4cqcUATLjA8tz5yE8eW/c5n+tu0Sg== -"@spectrum-css/checkbox@10.0.0-s2-foundations.18": - version "10.0.0-s2-foundations.18" - resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-10.0.0-s2-foundations.18.tgz#85b0163fb04a252e57e3cbce73e5158f7f4b63cd" - integrity sha512-waxb4pLSfT7HS6Bz/fsLHHNEqfmJZUZU6r1aw1fZIoKpVrFfMnkVn/eH7qMyMZ8oM3wpecd5XxV+4dP6YWU0PA== +"@spectrum-css/actionbar@^9.0.0-s2-foundations.17": + version "9.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-9.0.0-s2-foundations.17.tgz#7863c930a3238579fbfea05999137cbea9b2fb18" + integrity sha512-mHd1mus2KbNGLuXWh1H4+jM0A9JtCKXs/8CbtM9T4ymvS3GIDdJdaPxQ4GKP6QotBizSiLBwKMgdGmfnZDGOUw== + +"@spectrum-css/actionbutton@^7.0.0-s2-foundations.24": + version "7.0.0-s2-foundations.24" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-7.0.0-s2-foundations.24.tgz#ba840338596653a2b33af9dcc1c9f9606748e8b9" + integrity sha512-xONuu79B/wb0ioUTC1ju3Wk1dogrlYh03RfvnUX0Dk5uZkk8Ye85hiOGmdE2a0ZbNZGm2M/k7ACPg6yec1gNqw== -"@spectrum-css/clearbutton@7.0.0-s2-foundations.16": +"@spectrum-css/actiongroup@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-6.0.0-s2-foundations.17.tgz#f9724d3187f2dd5554c0b7a100a2f945e6239f2d" + integrity sha512-FDzz+DsG00jAJ0hvPUvPk6llYCnVM+zDXvnDlff3NukBNosdxc7MzM+yr/vA+DV5wyqsVxEFUYCEfKYgKtJPNg== + +"@spectrum-css/actionmenu@^7.0.0-s2-foundations.16": version "7.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-7.0.0-s2-foundations.16.tgz#5039908a6db86b465539eb4e38025da7f8c46270" - integrity sha512-7m6+xzFTWWe01qPMhgNQWnQPXYthYsN5Y3uB7J9C2qC34e2XVg04DZtgLlsY3n3bLk3FIWDZegvZQ6fm92m9/Q== + resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-7.0.0-s2-foundations.16.tgz#2f859673f14975713281c5ff4c8caf3380b2b3bb" + integrity sha512-4hj7f7jt3NjbS51dvONNacFUr66519AVLoxREE1TxakFJtlLkFrvtSUco5CSRmlkCg2b88cD2ggq961aSE/oyg== + +"@spectrum-css/alertbanner@^3.0.0-s2-foundations.17": + version "3.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/alertbanner/-/alertbanner-3.0.0-s2-foundations.17.tgz#50de2c32f2d948db4b67034707f527a96238bf37" + integrity sha512-1ZSmBDi2pqOnlwK5jRLf4js2yIVpn4+P2tYOMOOxQK9c1LXNXaelrhyqvcFUy85Q+IqM4enCcOWct/6tF/Rxnw== + +"@spectrum-css/alertdialog@^3.0.0-s2-foundations.17": + version "3.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/alertdialog/-/alertdialog-3.0.0-s2-foundations.17.tgz#ec9b805f3ca9e9bcda3097693d6fe73e6d2aa12e" + integrity sha512-VWAzR3PY7nICfl8MgOQjgDqo01xWmQY4BLiXteejdT9pCDtxnS5CmX79W0vSf2WPZUz3dhBdjhyDqaXymj5dSw== -"@spectrum-css/closebutton@6.0.0-s2-foundations.16": +"@spectrum-css/asset@^6.0.0-s2-foundations.16": version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/closebutton/-/closebutton-6.0.0-s2-foundations.16.tgz#4383c004f078a0c53a0e16b8b2ac30802dc88ef0" - integrity sha512-XjXMLsZlJkaS3BY4q+PqyH7g+l5dKcVTZ0Ek7qG4llLpSa2+/Sc3INoJZSYojqvv38xpRDETiFq50CjJ+OwX1w== + resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-6.0.0-s2-foundations.16.tgz#3f6a7c416aeec13c9d78674f01590ea696eacc4c" + integrity sha512-5viw4PXk95Hs4DG7csaU1uq5aMXAOGKeld22/A7jQ0Oyr1WCGz7U4C1WdDTuSoayiRlGhQ3+5esFGQfQopgJ6Q== -"@spectrum-css/coachindicator@3.0.0-s2-foundations.16": - version "3.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/coachindicator/-/coachindicator-3.0.0-s2-foundations.16.tgz#e80fd05d8a501e423bc5e8935fbaff556e87645c" - integrity sha512-pRGSyVY8/na1PwRubbVAv6dyn3KbbpUlRPFo3VYHrQU8IDdS3C6iTKbIa/xQDObk0Y3UZ+be5nf2BP3EjLfOzA== +"@spectrum-css/avatar@^8.0.0-s2-foundations.16": + version "8.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-8.0.0-s2-foundations.16.tgz#3251f1fddc14a7e4625feadf1b1b09bbe9125d37" + integrity sha512-i6btd7w8Agp4hQy4OUghnQ8O5m+1eUJ55lYk810NTfzpC3qQq7zT0w9LkHlpql/0WDR0/Ma5SuEJfxYe0s/I0g== + +"@spectrum-css/badge@^5.0.0-s2-foundations.17": + version "5.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-5.0.0-s2-foundations.17.tgz#243f17b9af92f7829c42e9e38f0bf3a5c3caa756" + integrity sha512-t+o1fmkctSpGM6eFOWGfH2sy4OEDWpa/aYf/n4vAOAdgIxvurz5ldEYH4QIevC2MivB8NpjlXLepSM73iLQPAA== + +"@spectrum-css/breadcrumb@^10.0.0-s2-foundations.17": + version "10.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-10.0.0-s2-foundations.17.tgz#d00618197dabbba48a23e9a88becbb79eea66996" + integrity sha512-ZnxwsL+KYrLBxiJ/dhKknIFGaB2/f9lXL+f67yy7hnMQD40fDx2XMzLmq943luuGB9i1ZV1x4LlDRCsz64zvDA== + +"@spectrum-css/button@^14.0.0-s2-foundations.19": + version "14.0.0-s2-foundations.19" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-14.0.0-s2-foundations.19.tgz#1e3a70bdd2c658d072e70371aa019a5308cb2180" + integrity sha512-uKHmLsB7Pqb6JpIEIVEe8udML7uyRhv2Fsr2Y+SfVjahi4bBVgMSyGsVJO0+/bhSAiKDjw+mOsro/hFJxGMnEg== -"@spectrum-css/coachmark@8.0.0-s2-foundations.17": +"@spectrum-css/buttongroup@^8.0.0-s2-foundations.17": version "8.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-8.0.0-s2-foundations.17.tgz#0534adcd714de66509ca4958d1d49ad34c9654e4" - integrity sha512-xWNVCd/Wf/vCZF3HIBH1vIIJfsbAYCoiU7bOGjBDFRexU+HsY9cc69vELBYHWIkGIf5wbZHtblBfdfHmnZChpw== + resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-8.0.0-s2-foundations.17.tgz#ba935f3f0d739ccfdc9464a04fdfd9da2109b359" + integrity sha512-hKl42jXXh+2FTOepaNjGMoGe8WsrlhR3v37/I0r+zY22lPwIqjEjexln4hBsS06w4N9v2OygNAO3DE4LK61w8w== -"@spectrum-css/colorarea@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-6.0.0-s2-foundations.15.tgz#00151a9823d53614f1f52d9b0724f536761ae4e4" - integrity sha512-o3gd/r3gyRVdUwFMMpJRyBo6oCgfc7YKUeK9t8EEdRqeBKEbUp2D2fiqrF1neu6DLaldVx01vvuJUlME3Wa3DA== +"@spectrum-css/card@^10.0.0-s2-foundations.21": + version "10.0.0-s2-foundations.21" + resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-10.0.0-s2-foundations.21.tgz#bf6c53322abd2dbf29d95e2409c57ba4cb2e6717" + integrity sha512-MrBGuxaddaR+56g8PmSHLV5L8wacQhxQVHho/8t5s+rhGwx2UpWCP7ADv61ozP2UcGVb6PhBKgdzBxu/hodNaw== -"@spectrum-css/colorhandle@9.0.0-s2-foundations.16": - version "9.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-9.0.0-s2-foundations.16.tgz#d917ce185ee576f89f53bf4f9c768f5c2816c262" - integrity sha512-sDNsqiWJ0JiT5p3iantQUEeOy4s65FdSTUuhrNovTfbwek8nSWDD9pUU8SrCVIBxaV74evTO3f1hpGIRYRt35g== +"@spectrum-css/checkbox@^10.0.0-s2-foundations.20": + version "10.0.0-s2-foundations.20" + resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-10.0.0-s2-foundations.20.tgz#7e79b0aa60499dea0b3886779dfec763b1d30afd" + integrity sha512-b7bfah6PVl3f7n+UJAs/zPNgSOloYlaLxgciBcit/roci44wa5HU6e+1q9f80TpSirKvbu6x8twU9V5EfuptLw== -"@spectrum-css/colorloupe@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-6.0.0-s2-foundations.15.tgz#bc72cadec1bc49caae995097f389122cb4c75a4e" - integrity sha512-IM70gqXwpZLvEfgkYEPfsiPpkM9HRT0wCvO6T/SXtDPQVhAla4AAXR82yt7LhnWsbx7JLMpW8vOmYTf3XyNhqw== +"@spectrum-css/clearbutton@^7.0.0-s2-foundations.17": + version "7.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-7.0.0-s2-foundations.17.tgz#ea04dd760c8e95ce8b647b6e87bbd0b346beb9e3" + integrity sha512-bR1ezVM9e5ahSwRZV2iduIoukgFE7aiVYZpo1ignD2LgtbYV4rE880t4k467r05gQ+T0HST1T1Gy57vpd77rwg== -"@spectrum-css/colorslider@7.0.0-s2-foundations.16": - version "7.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-7.0.0-s2-foundations.16.tgz#e3a7220f98176ccdc724464c70de5e0fe44b25fb" - integrity sha512-TWU2sn0mkFR/WutPd9F6bA20r0eleUVL1NKBINbPJLjUB89fwhzrgxygWXU+gdAAGuUskQjouK8OnmQsNbg5gw== +"@spectrum-css/closebutton@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/closebutton/-/closebutton-6.0.0-s2-foundations.17.tgz#8ea8bd3bd23c177fbf16e69c35d08d16cb5bba0d" + integrity sha512-o4vpxsLomzXRlr4giV+QTLCvOCnYf2ELCm5jfZmWt6BezD2is2o+2AHAHRaPFU/V96k8DPTuV6ShLKZS1idSCg== -"@spectrum-css/colorwheel@5.0.0-s2-foundations.15": - version "5.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-5.0.0-s2-foundations.15.tgz#a0f84f82521f40a0feda1862899a8e79ed88c3ac" - integrity sha512-BsWAoSUjHakRhek9Y+JshTPILVw2YCE5INMG+EhJ/cK6WCAAY5TQg5W5sBobwzFXXz0jk519wVFNVwEC93lrNg== +"@spectrum-css/coachindicator@^3.0.0-s2-foundations.18": + version "3.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachindicator/-/coachindicator-3.0.0-s2-foundations.18.tgz#4b95a5378d28ca0b4401ceac3e2012a249ff18f2" + integrity sha512-XN1vRvyNhDy4xDwLXONt8UF5UyfRj1LNMO9dbykjbQvI5LZbONlMBenQYzU183ycCZBGt4+4L2Y0NYBeDgzVnA== -"@spectrum-css/combobox@4.0.0-s2-foundations.18": - version "4.0.0-s2-foundations.18" - resolved "https://registry.yarnpkg.com/@spectrum-css/combobox/-/combobox-4.0.0-s2-foundations.18.tgz#746f54ec45b95b9ffdbc969b9de8ee393e62963e" - integrity sha512-Q5eIl6JgZrEr5pwiWoo/ZcBMFIaBQNnrFJQI1/7OhOYVFfqOQWyOoSXNpX1NxJrYUI+mcQPyxJ5ad6DvCH53Eg== +"@spectrum-css/coachmark@^8.0.0-s2-foundations.19": + version "8.0.0-s2-foundations.19" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-8.0.0-s2-foundations.19.tgz#06bc4ba83474685abd64845228c1e0a94c6bfd9f" + integrity sha512-6hP3iGQjUbCKoPPnh4l8JuvxnfY2mvW6JyBJwehL5cUDh3Gqb/b9zMc5EZaHOFrHa/buQh3HvK1N8OnNSuyHUg== + +"@spectrum-css/colorarea@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-6.0.0-s2-foundations.17.tgz#7282c9255e6e116b5904628166fd71bdfc3d2fda" + integrity sha512-0R7rXW4Ycv6DWHn7V9l/xUDniscttSIVpOLZyPogdL28jx1Kru0YwplbsbnXWaXvUPPJfGDeCHgnYtzTA21EBA== + +"@spectrum-css/colorhandle@^9.0.0-s2-foundations.18": + version "9.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-9.0.0-s2-foundations.18.tgz#bb24ea8a5cdb0ae006060620c3313bdcb406771b" + integrity sha512-00t6h/QNcl/kRFHf7pPvztDEhwRHcgGtM6hDI4iMRT+Av7qmrdyoq3ISeOCFwqRMk65Bm/5iV2Mi/bc5QhYeJQ== + +"@spectrum-css/colorloupe@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-6.0.0-s2-foundations.17.tgz#eec4ff19e0326b56b2f7b7de9c130903db6b2bbf" + integrity sha512-SB2bnukFhInqtEFkDco4h20+r60RYE5dSRaCVcmYQNzu0MvqlriW5dCzNOkorIPIrycfZaaAvGGszgprGBytig== + +"@spectrum-css/colorslider@^7.0.0-s2-foundations.18": + version "7.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-7.0.0-s2-foundations.18.tgz#17e163e9ea7c97590f3d4096eb2b4cf536170bff" + integrity sha512-4Sna9SdBS/J6Q5FC/6nrZ0G77kEiqMybJvYEFYponUazhVGy5oXyef02ayN8eGIZg81NRsblnx1FjHLKelrcqA== + +"@spectrum-css/colorwheel@^5.0.0-s2-foundations.16": + version "5.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-5.0.0-s2-foundations.16.tgz#15c78aaae17110efe3d50d71552b4b70ba6f98de" + integrity sha512-CEJsAh4GySPFp5X1iRULwP9U7Zj2JJs5lQ4SaheNxDKMUROwEhVp9EJmWFX+9b2j8Cqpiheq/C/nI2sUCiKGuA== + +"@spectrum-css/combobox@^4.0.0-s2-foundations.21": + version "4.0.0-s2-foundations.21" + resolved "https://registry.yarnpkg.com/@spectrum-css/combobox/-/combobox-4.0.0-s2-foundations.21.tgz#45e401ffb2fe061ee185c6f632641d49541cb326" + integrity sha512-e5IuywwIN1bHvf7ltZ/DaL/eoF0Ctnm6K7P4ZhigvAjGJMyHpZaxstM+lIFnfIWtmBF5u4WfgiPizyPR3XqUhw== "@spectrum-css/commons@11.0.0-s2-foundations.15": version "11.0.0-s2-foundations.15" resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-11.0.0-s2-foundations.15.tgz#d04770d461c9642c9a4739d208a2f85e247e0288" integrity sha512-aolxdmXn5VSUBN+Obb5WG/cQ0PQjlsxEyyFKPm3pZ+QKY7Q764rnDbxSHO+60I0hfQ23u0yjDJdWlmCsVoZm5g== -"@spectrum-css/contextualhelp@4.0.0-s2-foundations.16": - version "4.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/contextualhelp/-/contextualhelp-4.0.0-s2-foundations.16.tgz#340295fea294d63d1fa09ce23fc38cc3c3a0af8a" - integrity sha512-vzOyFyzlrvrlROwVV/1BryueGNjbWRzGi4qf6vCugrX0vqTqnARPP/X6cGz96F03mHJVbADhno4KFHZVjqSU+w== +"@spectrum-css/contextualhelp@^4.0.0-s2-foundations.18": + version "4.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/contextualhelp/-/contextualhelp-4.0.0-s2-foundations.18.tgz#cc11c2ce3e961c4d3885a46d9ef79e1320ec9f49" + integrity sha512-dz5Gbv301va9Z+nrVxitBZ/XI5jmenWHkhqN9/SAeLoPxUBc9BEv8g119EVYZA2o+Z9x8p7LPLYRMkZEQ43z+w== -"@spectrum-css/dialog@11.0.0-s2-foundations.15": - version "11.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-11.0.0-s2-foundations.15.tgz#36af80db597f86e1e0b30b21b535cd755b33585b" - integrity sha512-+FPnZJOF6+2YFrV5GoYS3YU6zmqO2mj+x3FiPfmEEbt9sRvWYuZ8GLfhMr2vp0GBMUNl65kpnKtnhx8RNI3b5A== +"@spectrum-css/dialog@^11.0.0-s2-foundations.17": + version "11.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-11.0.0-s2-foundations.17.tgz#46950fd536f1043aff726a1961f3a2c9945c390d" + integrity sha512-VYUJ0weIv1SYKX9fthTj8bCvzsLZCRChA8eUuQ3Hj/C2FvNVR9WSCmzWn6IDVnCb+HVM91sqjvh+K9ejY5qs9g== -"@spectrum-css/divider@4.0.0-s2-foundations.15": - version "4.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-4.0.0-s2-foundations.15.tgz#ae84e591a6a9fc6dff793f8462fab5a0018dc0e7" - integrity sha512-XKXgPSzF4HkNjN2D0UjStRFj+BNIt6BOtoxgyNZEV/sNHM1E4Oe6XVPyc8cifXJYj08pvu5B2WH0x+N04gj6cg== +"@spectrum-css/divider@^4.0.0-s2-foundations.16": + version "4.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-4.0.0-s2-foundations.16.tgz#3cf28bc3e86f1d05da199bd9b5b801cc6be856e0" + integrity sha512-8XZyYCsnWrjbIiG0RyFgqGl8Z0QOU3M8IYn28sD5wiZqxJlBvjKxfoabgS5cvYG6mpF4c4RzVSZAn2pycjZ75Q== -"@spectrum-css/dropzone@7.0.0-s2-foundations.16": - version "7.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-7.0.0-s2-foundations.16.tgz#7f926a05d6376e67fb644540ca36e7a4d2f0eea1" - integrity sha512-I7/lAzztQfBmYzSKYO3pnuRPQKgjNgPP5mYsDEvjB7vP5/zlc6WyahL89g03W8yFcnTfPNClK3mrkEwOkvIgxA== +"@spectrum-css/dropzone@^7.0.0-s2-foundations.17": + version "7.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-7.0.0-s2-foundations.17.tgz#d75f1e996db132184985a2698d6f029375df9a47" + integrity sha512-tUoC0OCP01g+BWDvW2I7ZMCWu2z6st/udluUx3E8vsPDM5gcMXBNfhysAluXUg15jDOz7oFavoYXS1fY+xDPcg== "@spectrum-css/expressvars@^3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@spectrum-css/expressvars/-/expressvars-3.0.9.tgz#72678e0845c240bc9cb6b4d828f20806810f4cab" integrity sha512-mnxdnF2NGNdba+3OomwFURPG0XqNRD+S2cmX0ARYnia9lv84HpzhbSoGuqmQO4+4+dXe46zYjnKRe2L8oJM/zw== -"@spectrum-css/fieldgroup@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-6.0.0-s2-foundations.16.tgz#09621cc906eaebb87e02db093aeff582d0694bff" - integrity sha512-2VnAgU+HwxdMYTiJKy00kkzYotN1Pljb2EkLEInNpXrVDwQsk+XNUHa5fToHJj9CIGy/a+Uot5byJcoQm9nHBg== +"@spectrum-css/fieldgroup@^6.0.0-s2-foundations.18": + version "6.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-6.0.0-s2-foundations.18.tgz#86064c883d36376499c2806ef9b0ef9bbb2bc9fc" + integrity sha512-/wkfa6dr51yXkg3JQmgZHEepidMNyW0T8pxSpNHSBWjMG4ch7BYVTAdhCLDDvo3UYtfAIcuvWfLI17MMatA8dA== -"@spectrum-css/fieldlabel@9.0.0-s2-foundations.16": - version "9.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-9.0.0-s2-foundations.16.tgz#011d0b35c18092da1de10d6d5b9e672d47a7432e" - integrity sha512-kaHr/BOf5egp5vCalcVvEMTBAYzdBAF7D5X6h4qvLIH6mnXGXG9QKawbYjIlb28WAdQKqVmxp3FBM3VI4ik2kg== +"@spectrum-css/fieldlabel@^9.0.0-s2-foundations.18": + version "9.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-9.0.0-s2-foundations.18.tgz#c9eb6ae4d032a3d2237c006f3368a70faeb29ef2" + integrity sha512-lxilW3v5k1E6e6fJmrJz4K5sF4lHeTTuSmDViDqAmoHQoS7W77vWCuney+UWOrK8trGbDtMwKX1fe3bY/2yfdQ== -"@spectrum-css/helptext@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/helptext/-/helptext-6.0.0-s2-foundations.15.tgz#c90d5f5e3fd27d53e1bb7f4a48516e939dad6630" - integrity sha512-TskWjui0Kx6XRWZFr+GZ59lZCktdPSGCGL5cgOHNXLUpTB49aGM7wNreJzKw+OytGLkJoQ59G0Ms2SZRhhNnGQ== +"@spectrum-css/helptext@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/helptext/-/helptext-6.0.0-s2-foundations.17.tgz#ea4ab8387b24d65f7388475a6bd04b933e7fc1ce" + integrity sha512-SNc4+pHiao8oAdGCeDJzvrqJ9r0xqpMo0cTqpjKH7TsJIDCRI4EbrO0dOan7vtS64IcVsdxBMkTcO5I1rMxNvw== -"@spectrum-css/icon@8.0.0-s2-foundations.16": - version "8.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.16.tgz#94b04fa1d30c378d21bb12a137095472b2596451" - integrity sha512-Cy2kAgP9vO2+Jw93zToIZrlJITp+HiOmvVkUchpX8Og7M2zEV8FixlDaqFaZ4A8uN3aFuYb0tcHa6u6rxyDQlA== +"@spectrum-css/icon@^8.0.0-s2-foundations.19": + version "8.0.0-s2-foundations.19" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.19.tgz#7dfde929d9d83d876ffb386efd183bf6c32536ec" + integrity sha512-oLTMOcujAslNDf0Ofq505ttNCLeXyLWlWybH29uhwee0XSAdRuKQwtSaxcEVYWgF5gN/3NWJvmqeDmBb/1j8Dg== -"@spectrum-css/icon@8.0.0-s2-foundations.17": +"@spectrum-css/illustratedmessage@^8.0.0-s2-foundations.17": version "8.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.17.tgz#f03087beb736cdfe0ba05e28e79cff6dc4a8db89" - integrity sha512-zOu84SxjW8AOtjrgtIG7ZkAyZHeAnTnKwRNWsSCR/WnApFhbf8nuAzQyWJAw5i8WPgsd8KqcRdLPcMWrc8jDqg== + resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-8.0.0-s2-foundations.17.tgz#b1e86f218505a482911be27a515e82a250ca2a58" + integrity sha512-wAnkCmnzVLUr+CJEw206CU/PFLlEnHDarTawOx7VwWH/2lzh3cT9IxveImRcaOqh7x96Z0c2opSuracE4dgVZQ== -"@spectrum-css/illustratedmessage@8.0.0-s2-foundations.15": - version "8.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-8.0.0-s2-foundations.15.tgz#64a9b70699e6e45aa8437b8f9b89923188ad262d" - integrity sha512-YNXhd5p+TJXnLfuw8DPBQkUnJkdjqgwEx7hRkUZ67mvXv8xOLjBRGj+IKoLNsQtzisa0EQ8qgazCSyLlzX2lvw== +"@spectrum-css/infieldbutton@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/infieldbutton/-/infieldbutton-6.0.0-s2-foundations.17.tgz#dc6c8efdcec6925e4ddf161d995e1187c87717c0" + integrity sha512-VgwMm3AinxbycHNSfq0cI/KLZhIoofe0zSUXFPH0JwC6YfNJ8sL4Fur2K1cNl5PJ56V1Fk52Ps7VNQaawSWknw== -"@spectrum-css/infieldbutton@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/infieldbutton/-/infieldbutton-6.0.0-s2-foundations.16.tgz#0aa930592730d57a69dc4dcff5a84ad4d7f03957" - integrity sha512-ArlIxQsnpZXOkHjHsCADrBaQvu2T+uFBewM5eC95TPqUySX7bOaJgBS8Yku4hgtdGfXYllIr9ee+LIOjsTTr/w== +"@spectrum-css/link@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-6.0.0-s2-foundations.17.tgz#9785acb6fcccd3f711eead957e50176896438c04" + integrity sha512-4h4UhU/qLk3hZ3w21XRhtxbcIDUHF6IRo31c7qEDcu13BCWmZh2aFzE5rpfR3L4U6CgvuSg4du9H1TzG3gi3rg== -"@spectrum-css/link@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-6.0.0-s2-foundations.15.tgz#fa2459d4dc31fb167c6aa9dfadc6b60b5e06c7cc" - integrity sha512-As+jvvwoWX5a3L1XaCHd9vFHQHjD7x2I+eWuV/YycQT4WmOB0mjYkRDdMGgKiOvn/Xh5iopTyJhmWskLmPJAOg== +"@spectrum-css/menu@^8.0.0-s2-foundations.17": + version "8.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-8.0.0-s2-foundations.17.tgz#c314e2108595a7b5221fd0da42389dae33db7300" + integrity sha512-Q+rVyy7RaoWU0CMHbSdE6+O1Rswgn3989gJkbKPkwKoqNYFqFDAVDjRcF/icUHSKrfgPlsR8Bt49X/DcAGVv8A== -"@spectrum-css/menu@8.0.0-s2-foundations.16": - version "8.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-8.0.0-s2-foundations.16.tgz#82ad4d5ce4025cf218f3b2d715f300048cb57426" - integrity sha512-yvsRQ2LcVMkmelFOtSZKUQgB/+r/rOutaQlHaRzVrWJFNRsNtS/f6l8AiXwv9cs3P8raAEjKoqLuat2Ok5gwdw== +"@spectrum-css/meter@^0.0.0-s2-foundations.0": + version "0.0.0-s2-foundations.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/meter/-/meter-0.0.0-s2-foundations.4.tgz#8704a353999f9f9caba259f88cebb929048b0a6c" + integrity sha512-hUeIew/APT8domddCKPKj479+RA3N5ryPfq/v6dm4j7grwWtvFk5zyIUOYc7pocMCoRCvmoog4ua5pHrKIJezA== -"@spectrum-css/meter@0.0.0-s2-foundations.2": - version "0.0.0-s2-foundations.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/meter/-/meter-0.0.0-s2-foundations.2.tgz#b4f82e497a42b2473a76bbeeede708012cccae39" - integrity sha512-h4v/sxFX3y/MEwVEMXPpIovXGTKqpFirLRPK1sBVHtw8QgnPweQPgRsmX5kiKDhbupZfma7LRDhy4vTPDMBAvg== +"@spectrum-css/modal@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-6.0.0-s2-foundations.17.tgz#26ffd4e877183cfc37f623eaf2593f0d4161846b" + integrity sha512-adteztBchPqEbYqQUfXYw9mcW+4avc5rjw8GT+2gQSA1jW+8ziYO7QOGWqKPAxgjjfzO3/0tNxaDToTLiW9LYg== -"@spectrum-css/modal@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-6.0.0-s2-foundations.16.tgz#66e57697e9205dc98cfb8cc501a88cfe17cc61c0" - integrity sha512-SiRZppJsPTZm3MtQt7nRUxbUVgP5eQWgH0pcZxC+6lA3W46ww+KEt1VIYpP1sMeud16RG+2vyKj2gGtOkgdu6A== +"@spectrum-css/opacitycheckerboard@^3.0.0-s2-foundations.17": + version "3.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-3.0.0-s2-foundations.17.tgz#0652c41dfee6fdc9474b06378c421da1af9110cd" + integrity sha512-LIblX30GoDAHGvFry1GlxK5pE74h78SQCVLjs9c3dXYiUZea+/tsvjzKHZEFgu1Jga+Y5cnivWFJBth0V7Npag== -"@spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.13": - version "3.0.0-s2-foundations.13" - resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-3.0.0-s2-foundations.13.tgz#f6020328a6204746b13915dc9486823fd7d652cf" - integrity sha512-qpkPHnC/F/6vbBrQ4CAXdCaKVFiZfdew9jX+LGh3yq3x8gAyfDWUcBZXjXVRnKqy0WKpT8xyB1KgXLHYywG0sA== +"@spectrum-css/picker@^9.0.0-s2-foundations.17": + version "9.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-9.0.0-s2-foundations.17.tgz#a73451c90ff5364a1a82c778ca2cb982320df802" + integrity sha512-A3k418CtcL9TrSxosCwy6GEsRcLrmDq8ujL0WkfT+yRkYxPmmZfID5lod8NrjTTokdYe/jNDhKZG52cc9aoP4g== -"@spectrum-css/picker@9.0.0-s2-foundations.15": - version "9.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-9.0.0-s2-foundations.15.tgz#bc3e0f041a1debb01b667041301a8cc5d202d4bc" - integrity sha512-wb7KfAhF08wJDjZm1hjA/01ZcqS66ZEpEVPD1WhDsqDYJankDn9LQPEqrvGlq/eNsVq3MCmpq10Zipe679dXCQ== +"@spectrum-css/pickerbutton@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-6.0.0-s2-foundations.17.tgz#e31ced99cadab5f6aa758520e8396b4123a054be" + integrity sha512-NEkEsISP/5t2s6A83+0YHxjPii5l3OF/8r5yt1g4uwSI+7MQZ1hZlAjuHd9V6WfFxGE1sSOvbJD2igzLQLb0rg== -"@spectrum-css/pickerbutton@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-6.0.0-s2-foundations.16.tgz#19ec8da128a12cd5b424289295bb73d839af915b" - integrity sha512-nxeVWihjyR9fygQEADuXHarbHdoDi6AGdhB/7TvFJc+j57QOlNRkq3OlmS57dw6Znfb1Q6oeyL9Ys567016lnA== +"@spectrum-css/popover@^8.0.0-s2-foundations.17": + version "8.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-8.0.0-s2-foundations.17.tgz#535647481e2fbfd35fb23a66f33462008f7fa754" + integrity sha512-zKgtiyY673cvJiA0D3Km7C6Lb5zMCBq7l0sDmi+2n9r56K4/PmmPXqwwm7ns1i0HZ/CPHJxAor8pIEDUXejzYA== -"@spectrum-css/popover@8.0.0-s2-foundations.16": - version "8.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-8.0.0-s2-foundations.16.tgz#9bc3437b704c989713ef19f44522799762dd9828" - integrity sha512-yxTIi7EEZdAcxiJu2XQjacYMmaP9afUM07S3neARzuKZBuSphGgT0RjNcPPZ2jcMqICtteJIxsc1QQaFDEzSuA== +"@spectrum-css/progressbar@^5.0.0-s2-foundations.20": + version "5.0.0-s2-foundations.20" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-5.0.0-s2-foundations.20.tgz#4281bfa80e4ed2cae1d2e136d6fc9b7a80391249" + integrity sha512-Irekf6G+fugyHEJ0T+gg7X9Rze/wwX3jSOb09yTJx1nf2dpSXx/xvQxpZqM00lOC+biQ7HK9xF43ScuVZNKIZg== -"@spectrum-css/progressbar@5.0.0-s2-foundations.19": - version "5.0.0-s2-foundations.19" - resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-5.0.0-s2-foundations.19.tgz#3f11c877b0e4589936b4e6820855c76033dd8409" - integrity sha512-IqKnB16g+sm4WRW7eDvwPCKj+siWLwHdbzAIMkOO+SObqK8xxitod11NgbCVrRXcPfZ+L5h1+5bkTn0hmv8GIA== +"@spectrum-css/progresscircle@^4.0.0-s2-foundations.16": + version "4.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-4.0.0-s2-foundations.16.tgz#9694811e9b820c57dfd589581645a25f50211738" + integrity sha512-Fq7i0zX5vrwSCfe90HZNhdizMhwrkIL1RCdJVVjS74xDM54s73qgwKJeypQGyohIKLPz3e2q3dlNdGgb2Tvekg== -"@spectrum-css/progresscircle@4.0.0-s2-foundations.15": - version "4.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-4.0.0-s2-foundations.15.tgz#2da932696854a7b1aac1497e036d2f0e811c922c" - integrity sha512-FQ4cPSVgyKjhQlsThq5UKo1VARpHCcDoabCI1SnMdl8Hnef5VtaIui2Yxmmht5S8wrhXlFRd23f3auQlyVaIrg== +"@spectrum-css/radio@^10.0.0-s2-foundations.18": + version "10.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-10.0.0-s2-foundations.18.tgz#ebecd33d50a5001c589d9b60a560a8b916916b38" + integrity sha512-Tql49uq8fRKXVa/TJim+bE/AA01csuORcbSRonezMVXImdaYBXFpD2RnQAHqVOrlfLQSM/to2IzMlAUSD8Nx7g== -"@spectrum-css/radio@10.0.0-s2-foundations.15": - version "10.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-10.0.0-s2-foundations.15.tgz#a5e7efec0e2e734f63058c2cb1cd9be6e6e93fcc" - integrity sha512-FEbVw6kKlurff9Ekd1ngfKB+TcfOoACYwx486TxuqBkmWpebzmmhWSWioj0r73I5tmZZESPqA3B0ijgl7ReX/Q== +"@spectrum-css/search@^8.0.0-s2-foundations.19": + version "8.0.0-s2-foundations.19" + resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-8.0.0-s2-foundations.19.tgz#d712c27f15d2025e006966ec9628e7925908bd35" + integrity sha512-Pwf59yqFKMxnLNG+fWLTfAtHKcmz+wat8yjRZe+3uWTb4E6Xp2Y4VoVzTNHvinhqvrOAZ9FWRqlQPIv4JaRmlA== -"@spectrum-css/search@8.0.0-s2-foundations.17": - version "8.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-8.0.0-s2-foundations.17.tgz#736860bfb69d3af90f94c958c145dc8469f2f13c" - integrity sha512-FCSoyh4148YlS6ekYuZiu+hAozf3JgxvkT0oYfrbx6AurJxTahO9HAEyUmSPAr5xqWCfD6kN39Ik46Hk9DAuww== +"@spectrum-css/sidenav@^6.0.0-s2-foundations.16": + version "6.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-6.0.0-s2-foundations.16.tgz#096a5cfa590b4752f4503e3983421c33e3985b02" + integrity sha512-sSJsKAAzg4isTtTWpE5z2qRJ/PS1tr1x90IQXhmm8VnXtOlzifoFSGrO0EplL9nAVvPhWvyFRnmJmKP/OfCVGg== -"@spectrum-css/sidenav@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-6.0.0-s2-foundations.15.tgz#1dadb2d7a4bdc511ddf5b28cdbc52cb4bedc3951" - integrity sha512-BtvWA6j2uDCHNsI8TjH2QHGZIYrWsBTKWlY0E6YKI4iWlwJjsQZ6LmLphIkyveofGhOALbTdLIYlYqA5zs2WXw== +"@spectrum-css/slider@^6.0.0-s2-foundations.18": + version "6.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-6.0.0-s2-foundations.18.tgz#211d3086c1dc4791bf59e487a7fd26f555d12ffe" + integrity sha512-zXTtv/5jbr13MwaoOGZNDkkPkfhLg13DIdUD8RzCGHKN1/wNVMI0Z3/n+btC4FtjyovgAsTFT/KvLQNN0U3bfQ== -"@spectrum-css/slider@6.0.0-s2-foundations.17": +"@spectrum-css/splitview@^6.0.0-s2-foundations.17": version "6.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-6.0.0-s2-foundations.17.tgz#230b0f5fb478b0ef44ab348bedb4d6e85719522c" - integrity sha512-Vt1wA4lgLjsi4nqln//2iArI+v1I0USpMBxmX2hQmjsOgM1a3sHikcwyagPLUQjGa73udx0XIgdLJwvrrtmH6w== + resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-6.0.0-s2-foundations.17.tgz#c4131c3b704a01a6c2d218bab9775f28a585d3e3" + integrity sha512-sKC+rSaDnnsvxJVsj7uRUvo+1mhlZGFxcSPOATEbQ3rBSUNIlzaymWzNxVdx10bAaEYEgZecgB/X1q+4SB0kzw== -"@spectrum-css/splitview@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-6.0.0-s2-foundations.15.tgz#415ed60da1467d8488b649a2f894bd792ba6762a" - integrity sha512-p+7ylMZvWKoBwcjY99bjuKzaNIOMx/XWdBrYvKiaes00FKVR1lm8HJNqwKjuO46OgIu88XUdWvn585do2TxCeA== +"@spectrum-css/statuslight@^8.0.0-s2-foundations.17": + version "8.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-8.0.0-s2-foundations.17.tgz#2b4dce5a03ceb7e87fdaa7d6d8a87b2e4abf0cc9" + integrity sha512-qHoQAO7/OMoYbhfkPI/8UtSG/AWZJjwpu1Q2LibOMz8DSHrcqPIT1ZCHIIaSCzfLkUL4K92g2U7Hnptaz8fSmQ== -"@spectrum-css/statuslight@8.0.0-s2-foundations.15": - version "8.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-8.0.0-s2-foundations.15.tgz#55abd832dde8789563b77e9d8d0395a39c520fbb" - integrity sha512-cSEV15oGA31IfeFlas1eSv621FX0K8eu5f2ETD9iW9MDQSH+TebUn7UAV+yJJ1O3BQSMJn7FFw4CmV/5+8An/A== +"@spectrum-css/stepper@^7.0.0-s2-foundations.19": + version "7.0.0-s2-foundations.19" + resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-7.0.0-s2-foundations.19.tgz#4f60877682e156dbe85042b57ff34c4d7953683b" + integrity sha512-OjPcAI5d+HnekMihkV87IJRsW5ND+0PEgO8RH0/qDC/QcULFoJBUaZczjJ8DMqUjQi9bCtUAgDYDROL8B9IV0Q== -"@spectrum-css/stepper@7.0.0-s2-foundations.18": +"@spectrum-css/swatch@^7.0.0-s2-foundations.18": version "7.0.0-s2-foundations.18" - resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-7.0.0-s2-foundations.18.tgz#d1492449d778739dce14074569a280957fb264d3" - integrity sha512-D4PUgy81VpLRdd5IDB4hXWmekdfLF29aaGI2Kvt5ny9gSK/qeNGd90srG+SBUBwSfLKvE8Cc6kov7KVwFDnCdw== - -"@spectrum-css/swatch@7.0.0-s2-foundations.17": - version "7.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-7.0.0-s2-foundations.17.tgz#ac9ce4d0c98d89bdc7b901c7aaf0c8b4bd15d5bc" - integrity sha512-5/EodsO+jVozkeJV99zaXNjaX/3Bk6Xl5qUi2INEiMTHkJg+vPNejdWyEaFxqOhD0vE37nwYIhGYHcElA60OBg== + resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-7.0.0-s2-foundations.18.tgz#be63d2a0de992d75290f0fb394a4376588b3cde3" + integrity sha512-dArbSXF7OIsfOkI8jTQRhJs7W9M9UEPlI42Dg4WLKAV7SjmbaChHYGRMcVkqzf6aa3DE7/K99DjdR7XWTYjtwA== -"@spectrum-css/swatchgroup@4.0.0-s2-foundations.15": - version "4.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-4.0.0-s2-foundations.15.tgz#a7095c8e9b322b82b6e589cd0e57a8ed33fb6806" - integrity sha512-u5JEvtMDwOblUzXFK5H9eCzXZoltf+kXHzH2RNKsZ2Lmp3lnWz0cHgh4c54aL/QGdcWXbTAQks6WirITZXAApg== +"@spectrum-css/swatchgroup@^4.0.0-s2-foundations.17": + version "4.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-4.0.0-s2-foundations.17.tgz#a92665686531fe22725d90e42b2c2ca2b3f2e680" + integrity sha512-UrCMn3MHWcESeeA0ld8GN7ERIhdNSuGt4nYdJZaAgr4aMaiPngZgoI5gcQs9egxI/Jl5OKZRC6CGZnEstHBmcQ== -"@spectrum-css/switch@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-6.0.0-s2-foundations.16.tgz#42e16ae732ddee0b048f761602a423a9df59eb83" - integrity sha512-YKUx4ibZoj4ra9smPi1R9Jtuq4afS6HJP7L3HDIgqsMtrZK9atZbcSyIBU//VC+OTSGJGvzdTsA34ahmWFdS7g== +"@spectrum-css/switch@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-6.0.0-s2-foundations.17.tgz#a40e12658294d528ff034b321873d8cb2834ef74" + integrity sha512-0RGNODFBx18a+vZSZ/zSfZ2y2mVFquuHZYgPMcVh4fUzNe/FBtWXNT9K3wFQpCB6n10y1YQb8AOGS36IPNauVw== -"@spectrum-css/table@7.0.0-s2-foundations.17": - version "7.0.0-s2-foundations.17" - resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-7.0.0-s2-foundations.17.tgz#822669475039492182416b8d8d13ac4626803373" - integrity sha512-+mxUueuVsQ7neBEG03rCeKQe+OJsXqgCFyw56NH5cpgIN3f4/nK5zcpN8F3LT7NysvQU5JqTEmYyBCkO20ZnEw== +"@spectrum-css/table@^7.0.0-s2-foundations.18": + version "7.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-7.0.0-s2-foundations.18.tgz#2bf9e01fef73024857b6b8b1d330ea2bc706ea1f" + integrity sha512-Cy3ZcmDhXK+e3xh8JKvBShdbgxTNRyHMpV+xZXhjr0K8jmsNarKTyHkBuL5XksUOaxIoGFjShtXSpSv0Q2WBQA== -"@spectrum-css/tabs@6.0.0-s2-foundations.16": - version "6.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-6.0.0-s2-foundations.16.tgz#643e078adb6e65e6f3fc71926752ee020e666d6f" - integrity sha512-FNfj5L98To7TeqIUqhrwvV7BQnv3RIA76R3BwEUjZF94rfQS6QS5rQX98jKuooBXHyOsLclOBhXGpHm+8rpIgw== +"@spectrum-css/tabs@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-6.0.0-s2-foundations.17.tgz#35dc44ae08aded4297474779fec86674616200b2" + integrity sha512-PNUm8T8tW8w2ZHI+ClqlhoB6k5+UQGZLSdcgO6kbdS60nfhp4kYFP/9tb9JEK5YT5z1cP/3LkmOiX0Pb00BkGw== -"@spectrum-css/tag@10.0.0-s2-foundations.15": - version "10.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-10.0.0-s2-foundations.15.tgz#a7366d7b6054dd74ac0935ee01edef4db21126a4" - integrity sha512-Rx021fhA7CNLLQhpL8O+DOoTHXVTAmMMhdfdZaw0sOcTCwoTGg2lnV85X0qdgxuUtAZEzfpXnIBm4XPoZ535Rg== +"@spectrum-css/tag@^10.0.0-s2-foundations.16": + version "10.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-10.0.0-s2-foundations.16.tgz#87c1f360866513a7f1e66af4e72a0ba1c64049ff" + integrity sha512-P8gOv0vi/F3ZcIizbcrKb9461QY6RwVTP6Xa87dverznt/1GfP1171YbvApDQPaPFPnHB7JlRzdKrCCbtd00LQ== -"@spectrum-css/taggroup@6.0.0-s2-foundations.15": - version "6.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-6.0.0-s2-foundations.15.tgz#0e2b0545a381d5e55c047249e9130a0fd7316e4e" - integrity sha512-GC1MbsgNajX8MmWPm75azXCpeKaOnKNc7KwQTznQbTGvdAeq0w63wBc4LcxFlLpoMMF4usR6RCRlRl1OKQFj9A== +"@spectrum-css/taggroup@^6.0.0-s2-foundations.17": + version "6.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-6.0.0-s2-foundations.17.tgz#cb3788ecdd1ad81af8d90f1d9d552ec3fbb7d41d" + integrity sha512-hopLyBxGOdal4MFWvz8Ol6JP5GjeiMfFbLhLclgbjrR72xg/5IFBwDyNY8XzTotj3UkmLFW40TxWGfaNZ2vuRA== -"@spectrum-css/textfield@8.0.0-s2-foundations.16": - version "8.0.0-s2-foundations.16" - resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-8.0.0-s2-foundations.16.tgz#3391af0b7cf89b4b7e658621f7fa42d8fa4e3985" - integrity sha512-ydz8joF4rNmbpJFhnNL2UrhmWKEo9vP3LAKQaTV7HPZGeLZVLsuIt7+ackynJIJDUsBcthxMTIKi1g1eSmXsWA== +"@spectrum-css/textfield@^8.0.0-s2-foundations.17": + version "8.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-8.0.0-s2-foundations.17.tgz#7a858a5461bb648415c647de96c1d0e737e857d1" + integrity sha512-GXEJFUrJMK2VXska2wpe635tMtulAWMcDYMh+LVysd46GL4nzl/H4MYc5za3nmKD4k+e/uX7rD+DC8/eLrLBeQ== "@spectrum-css/thumbnail@7.0.0-s2-foundations.18": version "7.0.0-s2-foundations.18" resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-7.0.0-s2-foundations.18.tgz#652b4c846efef229505a4311b2015f0f2bf940d5" integrity sha512-8l/WwT4VH532qpkHfGf6sTu1cTVOIWbZtBvnrxTA8CWX+3e2hnGkp4yqhSMg9RVZk3A279ImSHzUJ9xFb7sNEg== -"@spectrum-css/toast@11.0.0-s2-foundations.15": - version "11.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-11.0.0-s2-foundations.15.tgz#2ef09e24a68a1f8f30eb208f07eac009e9673a3a" - integrity sha512-xID5vAl6bwVkBqZJ3OTsI0dE5RtSz9DY4Dnsz9IPqoF3S+Ur4vTPetcLPsqLa8qtceLo+y/aoxGIsOxuq1yw5g== +"@spectrum-css/toast@^11.0.0-s2-foundations.16": + version "11.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-11.0.0-s2-foundations.16.tgz#35c424d874d61c18059d3f04bc358ae6414aae5d" + integrity sha512-QFXSEEQO6mdpiVNQNOKDm59roCVWjpMUAKutDGBCV6SKmrryZOD7NmTRkpcdoVQvdaL3COLl5o2W3HR6/tw1eA== "@spectrum-css/tokens-v2@npm:@spectrum-css/tokens@15.0.0-s2-foundations.27": version "15.0.0-s2-foundations.27" @@ -5633,35 +5628,30 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.3.1.tgz#52079bad1a9d6329bfcba00702c579366a83c72e" integrity sha512-YQBEvccp5jC9dxNMSLb708ucrxY64nExvFfJ0iQ+ddlAraOykFFoCTGcQ5UvSNp31Dp348H05PB7zRoStl0Jdg== -"@spectrum-css/tooltip@7.0.0-s2-foundations.15": - version "7.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-7.0.0-s2-foundations.15.tgz#5380bac0eea1022fd196b119a886e174a7ae5e43" - integrity sha512-qqy6i5PiW3VzyoXwKVrSyMGj9GkioYERlGaG4SIOoBQ39AzE0xMALJuzCzQTlLBIAlgaZjrQOEXMwDL6EOSGSg== +"@spectrum-css/tooltip@^7.0.0-s2-foundations.16": + version "7.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-7.0.0-s2-foundations.16.tgz#3ccfb104ce50794c0affdb5ae66decff22412883" + integrity sha512-kbQ29z1/ZIbXXRjmh0YuFofyyKYxVCnvUoR/XdFnofhRKNdCK+9zT5gwTTuH0HuRstIps/JqJb03nnfgC7pmRg== -"@spectrum-css/tray@4.0.0-s2-foundations.15": - version "4.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-4.0.0-s2-foundations.15.tgz#fb996c55998c41c4dd93f281d982babb4314e4b0" - integrity sha512-NxtdtEjt23/z3Njr+fKBDQJSZp1NfGBmF9Ec14zGY1PR1vbnstlt6Ocgp+ZWFHng+u71F/Bc6qNEPARemJlXVw== +"@spectrum-css/tray@^4.0.0-s2-foundations.17": + version "4.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-4.0.0-s2-foundations.17.tgz#07a3fd6999fbb9c85f7d65bbfccf55e948f0be63" + integrity sha512-UyLwiFGuxwFVrxpg8HKpzoLatpQ591wwMAEGkO48f3DtdvbU7vkZXG58/wlwSLzrmcTt1NUAy08XQnxZUFI1/Q== "@spectrum-css/typography@7.0.0-s2-foundations.17": version "7.0.0-s2-foundations.17" resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-7.0.0-s2-foundations.17.tgz#661a488a3f886a0582c7198c97e496ce4ebf279b" integrity sha512-gEEgUytlVdxdU0yv0RKuDrmjD8lP/Lh9ZMDSrYCNFEfRuAdVzc2LLFV/192neBGATCvfs5asvTHSl/lriCsmjg== -"@spectrum-css/ui-icons-s2@npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10": +"@spectrum-css/ui-icons-s2@npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10", "@spectrum-css/ui-icons@^2.0.0-s2-foundations.10": version "2.0.0-s2-foundations.10" resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-2.0.0-s2-foundations.10.tgz#0484d599aca3cbe63d5e71b415947d18f8296333" integrity sha512-8uOHTqrVrzCel3mn8K1epNpbeNrM9+0FfyQG0/sGznf9YkHfiyNU16tNfCFOx/CmzrvyuJbFDNbgEdZnNRzQLQ== -"@spectrum-css/ui-icons@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-1.1.2.tgz#596e10c662de2b3a2142277998be5e11faf6aff4" - integrity sha512-rD0EOdabyUJ6pjfvh9eiGlvhk2huhaah+AG8Utzqh/+YgMCn+NQEUz2zxRo9Jva8GXxORLGLDtISafHguOtiOA== - -"@spectrum-css/underlay@5.0.0-s2-foundations.15": - version "5.0.0-s2-foundations.15" - resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-5.0.0-s2-foundations.15.tgz#18b82245e6f09752f14642b8f6c87240544fc786" - integrity sha512-47BLHveo2/VUI+pqnVTXk3rvguTA4v08V+PDfQOkYqt9upG8ugWhZJL3+7VdhXuVNpHBlWeJA6qcnpRfumr8ZQ== +"@spectrum-css/underlay@^5.0.0-s2-foundations.17": + version "5.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-5.0.0-s2-foundations.17.tgz#14f71843450d93d8f01d5d0bbc2ae0ab9e1eaee4" + integrity sha512-GbFYiGC/yjuzkcqPMzXkd7mzr+IZR0L8lppb4aB6/Srsipc4mSu9wi5UwGYIrbYhI6tYqsBERdpi/J7iNtaC3w== "@spectrum-css/vars@^9.0.8": version "9.0.8"