From 2ba741ef46fd60d7f730dd589f9fb44ec8d19faa Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 10 Jan 2025 11:24:19 -0500 Subject: [PATCH 1/2] build: optimize and harden css token imports --- .circleci/config.yml | 2 +- package.json | 2 +- .../src/accordion-item-overrides.css | 2 +- .../accordion/src/accordion-overrides.css | 2 +- .../action-bar/src/action-bar-overrides.css | 2 +- .../src/action-button-overrides.css | 2 +- .../src/action-group-overrides.css | 2 +- .../src/alert-banner-overrides.css | 2 +- .../src/alert-dialog-overrides.css | 2 +- packages/asset/src/asset-overrides.css | 2 +- packages/avatar/src/avatar-overrides.css | 2 +- packages/badge/src/badge-overrides.css | 2 +- .../breadcrumbs/src/breadcrumbs-overrides.css | 2 +- .../src/button-group-overrides.css | 2 +- packages/button/src/button-overrides.css | 2 +- packages/card/src/card-overrides.css | 2 +- packages/checkbox/src/checkbox-overrides.css | 2 +- .../src/clear-button-overrides.css | 2 +- .../src/close-button-overrides.css | 2 +- .../src/coach-indicator-overrides.css | 2 +- .../coachmark/src/coachmark-overrides.css | 2 +- .../color-area/src/color-area-overrides.css | 2 +- .../src/color-handle-overrides.css | 2 +- .../color-loupe/src/color-loupe-overrides.css | 2 +- .../src/color-slider-overrides.css | 2 +- .../color-wheel/src/color-wheel-overrides.css | 2 +- packages/combobox/src/combobox-overrides.css | 2 +- .../src/contextual-help-overrides.css | 2 +- packages/dialog/src/dialog-overrides.css | 2 +- packages/dialog/src/spectrum-dialog.css | 78 +- packages/divider/src/divider-overrides.css | 2 +- packages/dropzone/src/dropzone-overrides.css | 2 +- .../field-group/src/field-group-overrides.css | 2 +- .../field-label/src/field-label-overrides.css | 2 +- .../help-text/src/help-text-overrides.css | 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 +- .../src/illustratedmessage-overrides.css | 2 +- .../src/infield-button-overrides.css | 2 +- packages/link/src/link-overrides.css | 2 +- packages/menu/src/menu-overrides.css | 2 +- packages/meter/src/meter-overrides.css | 2 +- packages/meter/src/progress-bar-overrides.css | 2 +- packages/modal/src/modal-overrides.css | 2 +- .../src/number-field-overrides.css | 2 +- .../src/picker-button-overrides.css | 2 +- packages/picker/src/picker-overrides.css | 2 +- packages/popover/src/popover-overrides.css | 2 +- .../src/progress-bar-overrides.css | 2 +- .../src/progress-circle-overrides.css | 2 +- packages/radio/src/radio-overrides.css | 2 +- packages/search/src/search-overrides.css | 2 +- .../sidenav/src/sidenav-heading-overrides.css | 2 +- .../sidenav/src/sidenav-item-overrides.css | 2 +- packages/sidenav/src/sidenav-overrides.css | 2 +- packages/slider/src/slider-overrides.css | 2 +- .../split-view/src/split-view-overrides.css | 2 +- .../src/status-light-overrides.css | 2 +- .../swatch/src/swatch-group-overrides.css | 2 +- packages/swatch/src/swatch-overrides.css | 2 +- packages/switch/src/switch-overrides.css | 2 +- packages/table/src/table-overrides.css | 2 +- packages/tabs/src/tabs-overrides.css | 2 +- packages/tabs/src/tabs-sizes-overrides.css | 2 +- packages/tags/src/tag-overrides.css | 2 +- packages/tags/src/tags-overrides.css | 2 +- .../textfield/src/textfield-overrides.css | 2 +- packages/thumbnail/package.json | 2 +- packages/thumbnail/src/spectrum-thumbnail.css | 275 +- .../thumbnail/src/thumbnail-overrides.css | 85 +- packages/toast/src/toast-overrides.css | 2 +- packages/tooltip/src/tooltip-overrides.css | 2 +- packages/tray/src/tray-overrides.css | 2 +- packages/underlay/src/underlay-overrides.css | 2 +- .../documentation/src/components/large.css | 1 - .../documentation/src/components/medium.css | 1 - .../documentation/src/components/styles.css | 1 + scripts/generate-tokens-wrapper.js | 407 +- tasks/css-tools.js | 73 +- tasks/process-spectrum.js | 35 +- .../src/is-opacity-checkerboard-overrides.css | 2 +- .../src/opacity-checkerboard-overrides.css | 2 +- tools/styles/package.json | 33 +- 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 +- tools/styles/tokens-v2/dark-vars.css | 10 - tools/styles/tokens-v2/global-vars.css | 40 +- tools/styles/tokens-v2/index.css | 104 +- 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 | 1 + .../spectrum/custom-darkest-vars.css | 1 + .../tokens-v2/spectrum/custom-large-vars.css | 1 + .../tokens-v2/spectrum/custom-light-vars.css | 1 + .../tokens-v2/spectrum/custom-medium-vars.css | 1 + .../styles/tokens-v2/spectrum/custom-vars.css | 1 + ...lobal-vars.css => system-theme-bridge.css} | 972 +-- .../tokens/express/custom-dark-vars.css | 1 + .../tokens/express/custom-darkest-vars.css | 1 + .../tokens/express/custom-large-vars.css | 1 + .../tokens/express/custom-light-vars.css | 1 + .../tokens/express/custom-medium-vars.css | 1 + tools/styles/tokens/express/custom-vars.css | 1 + 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 | 12 - tools/styles/tokens/express/large-vars.css | 3 - tools/styles/tokens/express/light-vars.css | 1 - tools/styles/tokens/express/medium-vars.css | 3 - .../tokens/express/system-theme-bridge.css | 6952 ++++++++++++++++ tools/styles/tokens/global-vars.css | 4 +- tools/styles/tokens/index.css | 3514 +++++--- .../tokens/spectrum/custom-dark-vars.css | 1 + .../tokens/spectrum/custom-darkest-vars.css | 1 + .../tokens/spectrum/custom-large-vars.css | 1 + .../tokens/spectrum/custom-light-vars.css | 1 + .../tokens/spectrum/custom-medium-vars.css | 1 + tools/styles/tokens/spectrum/custom-vars.css | 1 + tools/styles/tokens/spectrum/dark-vars.css | 23 +- tools/styles/tokens/spectrum/darkest-vars.css | 23 +- tools/styles/tokens/spectrum/global-vars.css | 7282 +---------------- tools/styles/tokens/spectrum/index.css | 123 +- tools/styles/tokens/spectrum/large-vars.css | 21 +- tools/styles/tokens/spectrum/light-vars.css | 25 +- tools/styles/tokens/spectrum/medium-vars.css | 20 +- .../tokens/spectrum/system-theme-bridge.css | 6958 ++++++++++++++++ .../src/express/scale-large-core-tokens.css | 3 +- tools/theme/src/express/scale-large.css | 3 +- .../src/express/scale-medium-core-tokens.css | 3 +- tools/theme/src/express/scale-medium.css | 5 +- tools/theme/src/express/theme-core-tokens.css | 4 +- .../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 | 6 +- tools/theme/src/scale-large-core-tokens.css | 1 - tools/theme/src/scale-large.css | 1 - tools/theme/src/scale-medium-core-tokens.css | 1 - tools/theme/src/scale-medium.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 | 2 +- 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 | 2 +- yarn.lock | 34 +- 171 files changed, 17385 insertions(+), 17277 deletions(-) rename tools/styles/tokens-v2/{spectrum/global-vars.css => system-theme-bridge.css} (98%) create mode 100644 tools/styles/tokens/express/system-theme-bridge.css create mode 100644 tools/styles/tokens/spectrum/system-theme-bridge.css diff --git a/.circleci/config.yml b/.circleci/config.yml index 2d7badbd4d..fc62e4241b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -14,7 +14,7 @@ parameters: # 3. Commit this change to the PR branch where the changes exist. current_golden_images_hash: type: string - default: a095ed1ef88686fdb24936dad763598ac7981193 + default: 93ad92a2fc031db0277fee635434955e438e94a9 wireit_cache_name: type: string default: wireit diff --git a/package.json b/package.json index cd8b1f649e..d5d7f315ee 100755 --- a/package.json +++ b/package.json @@ -143,9 +143,9 @@ "@webcomponents/webcomponentsjs": "^2.8.0", "alex": "^11.0.1", "cem-plugin-module-file-extensions": "^0.0.5", - "chalk": "^5.0.1", "chromatic": "^11.20.0", "chromedriver": "^130.0.1", + "colors": "^1.4.0", "common-tags": "^1.8.2", "custom-elements-manifest": "^2.0.0", "debounce": "^2.0.0", 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index c72787b882..a12f1431b0 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -65,12 +65,13 @@ governing permissions and limitations under the License. } .grid { - grid-template-columns: - var( + grid-template-columns: var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) auto 1fr auto minmax(0, auto) var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + ); grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' @@ -79,12 +80,10 @@ governing permissions and limitations under the License. '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; - grid-template-rows: - auto var( + grid-template-rows: auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr auto var( + ) auto auto 1fr auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); @@ -249,19 +248,16 @@ governing permissions and limitations under the License. } :host([dismissable]) .grid { - grid-template-columns: - var( + grid-template-columns: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) minmax( + ) auto 1fr auto minmax(0, auto) minmax( 0, var( --mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size) ) - ) - var( + ) var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); @@ -273,12 +269,10 @@ governing permissions and limitations under the License. '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; - grid-template-rows: - auto var( + grid-template-rows: auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr auto var( + ) auto auto 1fr auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); @@ -328,21 +322,17 @@ governing permissions and limitations under the License. :host([mode='fullscreen']) .grid, :host([mode='fullscreenTakeover']) .grid { - grid-template-columns: - var( + grid-template-columns: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - 1fr auto auto var( + ) 1fr auto auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); - grid-template-rows: - var( + grid-template-rows: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr var( + ) auto auto 1fr var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); @@ -388,12 +378,13 @@ governing permissions and limitations under the License. @media screen and (width <= 700px) { .grid { - grid-template-columns: - var( + grid-template-columns: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + ) auto 1fr auto minmax(0, auto) var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' @@ -407,31 +398,26 @@ governing permissions and limitations under the License. .grid, :host([dismissable]) .grid { - grid-template-rows: - auto var( + grid-template-rows: auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto auto 1fr auto var( + ) auto auto auto 1fr auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); } :host([dismissable]) .grid { - grid-template-columns: - var( + grid-template-columns: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) minmax( + ) auto 1fr auto minmax(0, auto) minmax( 0, var( --mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size) ) - ) - var( + ) var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); @@ -452,21 +438,17 @@ governing permissions and limitations under the License. :host([mode='fullscreen']) .grid, :host([mode='fullscreenTakeover']) .grid { - grid-template-columns: - var( + grid-template-columns: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - 1fr var( + ) 1fr var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); - grid-template-rows: - var( + grid-template-rows: var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto auto 1fr auto var( + ) auto auto auto 1fr auto var( --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index ed45be6af0..965a5d80c9 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 diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index d5d425a56d..546d9102d2 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 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/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/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/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/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/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/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/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/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/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/thumbnail/package.json b/packages/thumbnail/package.json index fa194be1e9..e943513299 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": "7.0.0-s2-foundations.18" + "@spectrum-css/thumbnail": "7.0.0-s2-foundations.17" }, "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 f7723b6891..b080b33de2 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -11,125 +11,9 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host, -:host([size='500']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); -} - -:host([size='50']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); -} - -:host([size='75']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); -} - -:host([size='100']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); -} - -:host([size='200']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); -} - -:host([size='300']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); -} - -:host([size='400']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); -} - -:host([size='600']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); -} - -:host([size='700']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); -} - -:host([size='800']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); -} - -:host([size='900']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); -} - -:host([size='1000']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); -} - :host { - --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); + inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); z-index: 0; margin: 0; padding: 0; @@ -140,7 +24,10 @@ governing permissions and limitations under the License. :host, :host:before { - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); } :host:before { @@ -148,8 +35,18 @@ governing permissions and limitations under the License. z-index: 2; inline-size: 100%; block-size: 100%; - box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) - var(--spectrum-thumbnail-border-color); + 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) + ) + ); position: absolute; } @@ -167,45 +64,93 @@ governing permissions and limitations under the License. :host([focused]):after { content: ''; border-style: solid; - border-width: var(--spectrum-thumbnail-focus-indicator-thickness); - border-color: var(--spectrum-thumbnail-focus-indicator-color); - border-radius: var(--spectrum-thumbnail-border-radius-default); + 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) + ); position: absolute; inset-block-start: calc( ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) ) * -1 ); inset-block-end: calc( ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) ) * -1 ); inset-inline-start: calc( ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) ) * -1 ); inset-inline-end: calc( ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) ) * -1 ); } :host([focused]) .image-wrapper { - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); overflow: hidden; } :host([layer]) { border-style: solid; - border-width: var(--spectrum-thumbnail-layer-border-width-outer); - border-color: var(--spectrum-thumbnail-layer-border-color-outer); + 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) + ) + ); box-sizing: border-box; justify-content: center; align-items: center; @@ -218,28 +163,65 @@ governing permissions and limitations under the License. :host([layer][selected]) { outline-style: solid; - outline-color: var(--spectrum-thumbnail-border-color-selected); - outline-width: var(--spectrum-thumbnail-border-width-selected); + 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-offset: calc( - var(--spectrum-thumbnail-border-width-selected) - - var(--spectrum-thumbnail-layer-border-width-inner) + 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) + ) ); } .layer-inner { inline-size: calc( var(--spectrum-thumbnail-size) - - var(--spectrum-thumbnail-layer-border-width-inner) * 2 + ( + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) + ) * 2 ); block-size: calc( var(--spectrum-thumbnail-size) - - var(--spectrum-thumbnail-layer-border-width-inner) * 2 + ( + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) + ) * 2 ); outline-style: solid; - outline-color: var(--spectrum-thumbnail-layer-border-color-inner); + outline-color: var( + --highcontrast-thumbnail-layer-border-color-inner, + var( + --mod-thumbnail-layer-border-color-inner, + var(--spectrum-thumbnail-layer-border-color-inner) + ) + ); outline-width: calc( - var(--spectrum-thumbnail-layer-border-width-inner) - - var(--spectrum-thumbnail-layer-border-width-outer) + 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) + ) ); justify-content: center; align-items: center; @@ -272,7 +254,10 @@ governing permissions and limitations under the License. z-index: 0; block-size: 100%; inline-size: 100%; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); 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 97cc92603c..1d05cad22d 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,5 +12,88 @@ /* 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/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/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/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/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/src/components/large.css b/projects/documentation/src/components/large.css index cef62b55e1..8208e85b69 100644 --- a/projects/documentation/src/components/large.css +++ b/projects/documentation/src/components/large.css @@ -1,5 +1,4 @@ @import '@spectrum-web-components/styles/tokens/large-vars.css'; -@import '@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/large-vars.css'; :root { diff --git a/projects/documentation/src/components/medium.css b/projects/documentation/src/components/medium.css index 04f22e9590..e16c1ef015 100644 --- a/projects/documentation/src/components/medium.css +++ b/projects/documentation/src/components/medium.css @@ -1,5 +1,4 @@ @import '@spectrum-web-components/styles/tokens/medium-vars.css'; -@import '@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'; :root { diff --git a/projects/documentation/src/components/styles.css b/projects/documentation/src/components/styles.css index 7577c6f13b..cb52986389 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/system-theme-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..1cdd50cc10 100644 --- a/scripts/generate-tokens-wrapper.js +++ b/scripts/generate-tokens-wrapper.js @@ -9,25 +9,56 @@ 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 'colors'; + import fs from 'fs-extra'; import path from 'path'; import { fileURLToPath } from 'url'; +import { createRequire } from 'node:module'; +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, '..'); + +/** @todo should we align this with the prettier settings used by CSS? */ +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 +133,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 +169,243 @@ const targetHost = (css) => { return css.replaceAll(spectrumThemeSelectorRegExp, ':host,\n:root {'); }; -const removeImportantComments = (css) => { +/** + * 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} + */ +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'); + } + + const outputPath = path.join(__dirname, '..', 'tools', 'styles'); + /** - * Spectrum CSS uses /*! comments that are "not" removable. - * These comments pile up in merged files, so we _need_ to remove them. + * @TODO + * These assets are not provided by the tokens or tokens-v2 packages; + * they are deprecated and should be removed from the output directory + * in the next major release. */ - return css.replaceAll(importantCommentRegExp, ''); -}; + const deprecatedAssets = isSpectrumOne + ? [ + 'express/custom-dark-vars.css', + 'express/custom-darkest-vars.css', + 'express/custom-light-vars.css', + 'express/custom-large-vars.css', + 'express/custom-medium-vars.css', + 'express/custom-vars.css', + 'spectrum/custom-dark-vars.css', + 'spectrum/custom-darkest-vars.css', + 'spectrum/custom-light-vars.css', + 'spectrum/custom-large-vars.css', + 'spectrum/custom-medium-vars.css', + 'spectrum/custom-vars.css', + ] + : [ + 'spectrum/custom-dark-vars.css', + 'spectrum/custom-darkest-vars.css', + 'spectrum/custom-large-vars.css', + 'spectrum/custom-light-vars.css', + 'spectrum/custom-medium-vars.css', + 'spectrum/custom-vars.css', + ]; -/** - * 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 - */ -const processTokens = (srcPath, tokensDir) => { - let css = fs.readFileSync(srcPath, 'utf8'); - const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); + // If clean is true, remove the existing directory before writing + if (clean) { + rimrafSync(path.join(outputPath, tokenPackageName), { + // do not remove the deprecated token files + filter: (file, dirent) => + dirent.isFile() && + !deprecatedAssets.includes( + path.relative(path.join(outputPath, tokenPackageName), file) + ), + }); + } - css = removeImportantComments(targetHost(css)); + // Only create express directory for tokens not tokens-v2 + if (isSpectrumOne) { + ['spectrum', 'express'].forEach((folder) => { + // Create the directories if they don't exist + fs.mkdirSync(path.join(outputPath, tokenPackageName, folder), { + recursive: true, + }); + }); + } else { + fs.mkdirSync(path.join(outputPath, tokenPackageName), { + recursive: true, + }); + } - 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' - ); + /** + * 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 Promise.all([ + fg(['*.css', 'spectrum/*.css', 'express/*.css'], { + cwd: tokenSourcePath, + }), + // S1 has their index.css file outside of the css directory + fg(['../index.css'], { + cwd: tokenSourcePath, + }), + ]).then(([files, indexFiles]) => [...files, ...indexFiles]); - 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.replace(/\.\.\//, '') ); - } - }) + + 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]); + + // Write the following empty files to the directory as a temporary + // placeholder for erroneous / orphaned files that do not exist in the + // tokens packages + + fs.mkdirSync(path.join(outputPath, tokenPackageName, 'spectrum'), { + recursive: true, + }); + + return processComponentThemes(outputPath); +} /** - * Core entry function + * Every component package with a dist/themes folder + * needs to be processed and concatenated into a single file + * - spectrum-two.css files are written to tokens-v2/system-theme-bridge.css + * - express.css files are written to tokens/express/system-theme-bridge.css + * - spectrum.css files are written to tokens/spectrum/system-theme-bridge.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 = 'system-theme-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 ); - } - fs.writeFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - tokensDir, - 'spectrum', - 'global-vars.css' - ), - '' - ); + return fsp.writeFile(outputPath, formatted, { encoding: 'utf8' }); + }; - for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) { - processTokens(tokensPath, tokensDir); - } - if (isSpectrumOne) { - return; + // 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)); + }), + }; + + /* 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..068dd615d6 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'; }; @@ -168,6 +162,7 @@ async function processComponent(componentPath) { * @type { import('./spectrum-css-converter').SpectrumCSSConverter} */ for await (const conversion of conversions) { + // The default package file is index.css but index-base.css contains the base styles compatible with theme switching. const sourcePath = require .resolve(conversion.inPackage) .replace('index.css', 'index-base.css'); @@ -181,13 +176,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 +192,6 @@ async function processComponent(componentPath) { ...component, }, }); - matched = true; } else if (isFocusRing(component)) { match.push({ hoist: true, @@ -212,7 +204,6 @@ async function processComponent(componentPath) { kind: 'focus-visible', }, }); - matched = true; } conversion.components.forEach((componentConversion) => { if (Array.isArray(componentConversion.find)) { @@ -310,7 +301,6 @@ async function processComponent(componentPath) { newMatch.replace = component; } match.push(newMatch); - matched = true; } }); if (!match.length) { @@ -331,7 +321,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 +375,7 @@ async function processComponent(componentPath) { } } }); - // @ts-ignore + if (host) { if ( newSelector.length && @@ -419,6 +409,7 @@ async function processComponent(componentPath) { } selectors.push(conditionSelector(newSelector)); }); + return selectors; }; @@ -427,6 +418,7 @@ async function processComponent(componentPath) { return buildSelectorsV2(selectorMetadata); }; if (conversion.systemOverrides !== false) { + // The default package file is index.css but index-theme.css contains the --system custom property mappings that facilitate theme switching. const bridgepath = require .resolve(conversion.inPackage) .replace('index.css', 'index-theme.css'); @@ -439,13 +431,13 @@ async function processComponent(componentPath) { ? conversion.outPackage : ['packages', conversion.outPackage]), 'src', + // @todo can we rename this file to be more descriptive? i.e. `spectrum-${conversion.fileName}-system-bridge.css` `${conversion.fileName}-overrides.css` ); const { code } = transform({ code: Buffer.from(bridgeCss), visitor: { - // @ts-ignore Rule(rule) { if ( !conversion.allowThemeRules && @@ -639,16 +631,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 +649,6 @@ async function processComponent(componentPath) { const { code } = transform({ code: Buffer.from(sourceCSS), visitor: { - // @ts-ignore 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/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 968e1ffb2f..9390b961e1 100755 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -82,23 +82,19 @@ "./src/spectrum-lang.css": "./src/spectrum-lang.css", "./src/lang-overrides.css": "./src/lang-overrides.css", "./src/spectrum-typography.css": "./src/spectrum-typography.css", - "./tokens/express/custom-large-vars.css": "./tokens/express/custom-large-vars.css", - "./tokens/express/custom-medium-vars.css": "./tokens/express/custom-medium-vars.css", - "./tokens/express/custom-vars.css": "./tokens/express/custom-vars.css", - "./tokens/express/global-vars.css": "./tokens/express/global-vars.css", - "./tokens/express/large-vars.css": "./tokens/express/large-vars.css", - "./tokens/express/medium-vars.css": "./tokens/express/medium-vars.css", - "./tokens/spectrum/custom-large-vars.css": "./tokens/spectrum/custom-large-vars.css", - "./tokens/spectrum/custom-medium-vars.css": "./tokens/spectrum/custom-medium-vars.css", - "./tokens/spectrum/custom-vars.css": "./tokens/spectrum/custom-vars.css", - "./tokens/spectrum/global-vars.css": "./tokens/spectrum/global-vars.css", - "./tokens/spectrum/large-vars.css": "./tokens/spectrum/large-vars.css", - "./tokens/spectrum/medium-vars.css": "./tokens/spectrum/medium-vars.css", - "./tokens-v2/spectrum/custom-large-vars.css": "./tokens-v2/spectrum/custom-large-vars.css", - "./tokens-v2/spectrum/custom-medium-vars.css": "./tokens-v2/spectrum/custom-medium-vars.css", - "./tokens-v2/spectrum/custom-vars.css": "./tokens-v2/spectrum/custom-vars.css", - "./tokens-v2/spectrum/custom-dark-vars.css": "./tokens-v2/spectrum/custom-dark-vars.css", - "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/spectrum/custom-light-vars.css" + "./tokens/*": "./tokens/*", + "./tokens-v2/*": "./tokens-v2/*", + "./tokens/express/custom-large-vars.css": "./tokens/express/large-vars.css", + "./tokens/express/custom-medium-vars.css": "./tokens/express/medium-vars.css", + "./tokens/express/custom-vars.css": "./tokens/express/global-vars.css", + "./tokens/spectrum/custom-large-vars.css": "./tokens/spectrum/large-vars.css", + "./tokens/spectrum/custom-medium-vars.css": "./tokens/spectrum/medium-vars.css", + "./tokens/spectrum/custom-vars.css": "./tokens/spectrum/global-vars.css", + "./tokens-v2/spectrum/custom-large-vars.css": "./tokens-v2/large-vars.css", + "./tokens-v2/spectrum/custom-medium-vars.css": "./tokens-v2/medium-vars.css", + "./tokens-v2/spectrum/custom-vars.css": "./tokens-v2/global-vars.css", + "./tokens-v2/spectrum/custom-dark-vars.css": "./tokens-v2/dark-vars.css", + "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/light-vars.css" }, "scripts": { "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" @@ -123,9 +119,8 @@ "lit": "^2.5.0 || ^3.1.3" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0-s2-foundations.15", "@spectrum-css/expressvars": "^3.0.9", - "@spectrum-css/tokens": "14.3.1", + "@spectrum-css/tokens": "15.0.0", "@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/vars": "^9.0.8" 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/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 index 0a5a71eec6..1c8254690e 100644 --- a/tools/styles/tokens-v2/index.css +++ b/tools/styles/tokens-v2/index.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,10 +1017,8 @@ 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); @@ -1801,7 +1790,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( @@ -2007,7 +1996,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; @@ -2052,50 +2041,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); @@ -2107,10 +2089,8 @@ --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; @@ -2653,30 +2633,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; @@ -2685,42 +2658,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; @@ -2730,10 +2696,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; @@ -2741,7 +2705,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); @@ -2749,15 +2712,11 @@ --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; @@ -3708,7 +3667,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 @@ -3737,15 +3695,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 @@ -3754,21 +3708,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); @@ -3776,7 +3727,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 @@ -3786,10 +3736,8 @@ 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; @@ -4332,30 +4280,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; @@ -4364,28 +4305,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; @@ -4394,14 +4330,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; @@ -4411,10 +4345,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; @@ -4422,7 +4354,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); @@ -4430,11 +4361,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/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 index 3b5fe4f4c7..63b393fc32 100644 --- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in ../dark-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css index 9b137abd32..a928e4d7d5 100644 --- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css @@ -1,3 +1,4 @@ +/* @deprecated there is no darkest theme in S2; please use the dark theme provided at dark-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css index b21332805f..24e93e29a9 100644 --- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-large-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in ../large-vars.css */ :host, :root { /* edge-to-visual-only is used for icon-only buttons */ diff --git a/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css index 05529d7727..f14a082b75 100644 --- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-light-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in ../light-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css index 487524757b..b174d71e41 100644 --- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in ../medium-vars.css */ :host, :root { /* edge-to-visual-only is used for icon-only buttons */ diff --git a/tools/styles/tokens-v2/spectrum/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css index 7dfeb222c0..0c6f4e55ea 100644 --- a/tools/styles/tokens-v2/spectrum/custom-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in ../global-vars.css */ :host, :root { --system: spectrum; diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/system-theme-bridge.css similarity index 98% rename from tools/styles/tokens-v2/spectrum/global-vars.css rename to tools/styles/tokens-v2/system-theme-bridge.css index 9c032dd2e8..fa75b4aeaa 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/system-theme-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); @@ -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); @@ -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%; @@ -5205,15 +5005,28 @@ --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-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 ); @@ -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,10 +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); @@ -7018,10 +6762,6 @@ --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 +6806,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 +6853,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 +6865,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 +6887,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 +6894,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 +6902,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 +6925,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 +6939,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/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css index f43989ec31..895972f958 100644 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ b/tools/styles/tokens/express/custom-dark-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/dark-vars.css */ :host, :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css index f43989ec31..8f698ce68b 100644 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ b/tools/styles/tokens/express/custom-darkest-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/darkest-vars.css */ :host, :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index b5e1ea6d01..8b60059274 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/large-vars.css */ :host, :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'; diff --git a/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css index f6a897274d..0967a7e97a 100644 --- a/tools/styles/tokens/express/custom-light-vars.css +++ b/tools/styles/tokens/express/custom-light-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/light-vars.css */ :host, :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 031b3e02a4..603bec8895 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/medium-vars.css */ :host, :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'; diff --git a/tools/styles/tokens/express/custom-vars.css b/tools/styles/tokens/express/custom-vars.css index a331202e96..6498e011d1 100644 --- a/tools/styles/tokens/express/custom-vars.css +++ b/tools/styles/tokens/express/custom-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in express/global-vars.css */ :host, :root { --system: express; 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 index dc65cea659..c06e9a7e45 100644 --- a/tools/styles/tokens/express/index.css +++ b/tools/styles/tokens/express/index.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 @@ -12,7 +11,6 @@ --spectrum-indigo-700 ); } - :host, :root { --spectrum-neutral-background-color-selected-default: var( @@ -66,7 +64,6 @@ ); --system: express; } - :host, :root { --spectrum-checkbox-control-size-small: 18px; @@ -129,19 +126,14 @@ --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 @@ -153,7 +145,6 @@ --spectrum-indigo-900 ); } - :host, :root { --spectrum-checkbox-control-size-small: 14px; @@ -216,10 +207,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/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/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css new file mode 100644 index 0000000000..af1303b90e --- /dev/null +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -0,0 +1,6952 @@ +: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-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 + ); + --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 + ); + --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-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); + --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/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 index 9d84aeac9e..611deff199 100644 --- a/tools/styles/tokens/index.css +++ b/tools/styles/tokens/index.css @@ -1,70 +1,82 @@ :host, :root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); + --spectrum-overlay-opacity: 0.5; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.5; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-50); + --spectrum-background-layer-1-color: var(--spectrum-gray-75); + --spectrum-background-layer-2-color: var(--spectrum-gray-100); + --spectrum-neutral-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 + --spectrum-gray-400 ); - --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-hover: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 + --spectrum-gray-300 ); --spectrum-accent-background-color-default: var( - --spectrum-accent-color-700 + --spectrum-accent-color-500 ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-600); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-600 + --spectrum-accent-color-400 ); --spectrum-informative-background-color-default: var( - --spectrum-informative-color-700 + --spectrum-informative-color-500 ); --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-600 + --spectrum-informative-color-400 ); --spectrum-informative-background-color-down: var( - --spectrum-informative-color-600 + --spectrum-informative-color-300 ); --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-600 + --spectrum-informative-color-400 ); --spectrum-negative-background-color-default: var( - --spectrum-negative-color-700 + --spectrum-negative-color-500 ); --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-600 + --spectrum-negative-color-400 ); --spectrum-negative-background-color-down: var( - --spectrum-negative-color-600 + --spectrum-negative-color-300 ); --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-600 + --spectrum-negative-color-400 ); --spectrum-positive-background-color-default: var( - --spectrum-positive-color-700 + --spectrum-positive-color-500 ); --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-600 + --spectrum-positive-color-400 ); --spectrum-positive-background-color-down: var( - --spectrum-positive-color-600 + --spectrum-positive-color-300 ); --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-600 + --spectrum-positive-color-400 ); --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 + --spectrum-notice-color-800 ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); + --spectrum-orange-background-color-default: var(--spectrum-orange-800); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 + --spectrum-chartreuse-900 ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); + --spectrum-celery-background-color-default: var(--spectrum-celery-800); --spectrum-green-background-color-default: var(--spectrum-green-700); --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); @@ -93,462 +105,916 @@ --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-gray-50-rgb: 29, 29, 29; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 38, 38, 38; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 50, 50, 50; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 63, 63, 63; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 84, 84, 84; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 112, 112, 112; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 144, 144, 144; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 178, 178, 178; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 209, 209, 209; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 235, 235, 235; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 255, 255, 255; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 0, 56, 119; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 0, 65, 138; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 0, 77, 163; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 0, 89, 194; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 3, 103, 224; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 19, 121, 243; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 143, 244; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 84, 163, 246; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 114, 183, 249; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 143, 202, 252; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 174, 219, 254; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 204, 233, 255; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 232, 246, 255; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 255, 255, 255; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 123, 0, 0; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 141, 0, 0; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 165, 0, 0; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 190, 4, 3; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 215, 25, 19; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 234, 56, 41; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 246, 88, 67; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 255, 117, 94; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 255, 149, 129; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 176, 161; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 201, 189; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 222, 216; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 241, 238; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 255, 255; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 102, 37, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 117, 45, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 137, 55, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 158, 66, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 180, 78, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 202, 93, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 225, 109, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 244, 129, 12; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 254, 154, 46; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 255, 181, 88; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 253, 206, 136; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 225, 179; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 242, 221; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 253, 249; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 76, 54, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 88, 64, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 103, 76, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 119, 89, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 136, 104, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 155, 120, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 174, 137, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 192, 156, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 211, 174, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 228, 194, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 244, 213, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 249, 232, 92; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 252, 246, 187; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 255, 255; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 48, 64, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 55, 74, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 65, 87, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 76, 102, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 89, 118, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 102, 136, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 117, 154, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 132, 173, 1; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 148, 192, 8; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 166, 211, 18; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 184, 229, 37; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 205, 245, 71; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 231, 254, 154; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 255, 255, 255; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 0, 69, 10; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 0, 80, 12; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 0, 94, 14; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 0, 109, 15; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 0, 127, 15; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 0, 145, 18; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 4, 165, 30; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 34, 184, 51; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 68, 202, 73; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 105, 220, 99; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 142, 235, 127; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 180, 247, 162; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 221, 253, 211; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 255, 255, 255; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 4, 67, 41; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 78, 47; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 92, 56; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 108, 67; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 0, 125, 78; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 0, 143, 93; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 18, 162, 108; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 43, 180, 125; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 67, 199, 143; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 94, 217, 162; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 129, 233, 184; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 177, 244, 209; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 223, 250, 234; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 254, 255, 252; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 18, 65, 63; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 14, 76, 73; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 4, 90, 87; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 105, 101; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 0, 122, 117; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 0, 140, 135; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 158, 152; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 3, 178, 171; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 54, 197, 189; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 93, 214, 207; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 132, 230, 223; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 176, 242, 236; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 223, 249, 246; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 254, 255, 254; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 0, 61, 98; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 71, 111; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 85, 127; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 100, 145; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 116, 162; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 0, 134, 180; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 0, 153, 198; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 14, 173, 215; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 44, 193, 230; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 84, 211, 241; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 127, 228, 249; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 167, 241, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 215, 250, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 255, 255, 255; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 40, 44, 140; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 47, 52, 163; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 57, 63, 187; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 70, 75, 211; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 85, 91, 231; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 104, 109, 244; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 124, 129, 251; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 145, 149, 255; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 167, 170, 255; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 188, 190, 255; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 208, 210, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 226, 228, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 243, 243, 254; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 255, 255, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 76, 13, 157; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 89, 17, 177; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 105, 28, 200; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 122, 45, 218; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 140, 65, 233; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 157, 87, 243; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 172, 111, 249; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 187, 135, 251; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 202, 159, 252; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 215, 182, 254; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 228, 204, 254; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 239, 223, 255; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 249, 240, 255; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 255, 253, 255; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 107, 3, 106; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 123, 0, 123; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 144, 0, 145; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 165, 13, 166; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 185, 37, 185; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 205, 57, 206; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 223, 81, 224; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 235, 110, 236; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 244, 140, 242; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 250, 168, 245; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 254, 194, 248; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 255, 219, 250; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 255, 239, 252; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 255, 253, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 118, 0, 58; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 137, 0, 66; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 160, 0, 77; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 182, 18, 90; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 203, 38, 109; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 222, 61, 130; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 237, 87, 149; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 249, 114, 167; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 143, 185; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 172, 202; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 198, 218; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 221, 233; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 240, 245; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 252, 253; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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-menu-item-background-color-default: rgba(255, 255, 255, 0); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 +} +:host, +:root { + --spectrum-overlay-opacity: 0.6; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.8; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-50); + --spectrum-background-layer-1-color: var(--spectrum-gray-75); + --spectrum-background-layer-2-color: var(--spectrum-gray-100); + --spectrum-neutral-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default: var( + --spectrum-gray-400 ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-300 ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 + --spectrum-accent-background-color-default: var( + --spectrum-accent-color-600 ); - --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-accent-background-color-hover: var(--spectrum-accent-color-500); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-500 ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-600 ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-500 ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-400 ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-500 ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-600 ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-500 ); - --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-negative-background-color-down: var( + --spectrum-negative-color-400 ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-500 ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-600 ); - - --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-positive-background-color-hover: var( + --spectrum-positive-color-500 ); - --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-positive-background-color-down: var( + --spectrum-positive-color-400 ); - --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-positive-background-color-key-focus: var( + --spectrum-positive-color-500 ); - --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-notice-background-color-default: var( + --spectrum-notice-color-800 ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-700); + --spectrum-orange-background-color-default: var(--spectrum-orange-800); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-900 ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color: rgba(255, 255, 255, 0.51); + --spectrum-celery-background-color-default: var(--spectrum-celery-800); + --spectrum-green-background-color-default: var(--spectrum-green-700); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); + --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-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-gray-50-rgb: 0, 0, 0; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 14, 14, 14; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 29, 29, 29; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 48, 48, 48; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 75, 75, 75; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 106, 106, 106; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 141, 141, 141; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 176, 176, 176; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 208, 208, 208; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 235, 235, 235; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 255, 255, 255; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 0, 38, 81; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 0, 50, 106; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 0, 64, 135; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 0, 78, 166; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 0, 92, 200; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 6, 108, 231; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 29, 128, 245; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 64, 150, 243; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 94, 170, 247; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 124, 189, 250; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 152, 206, 253; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 179, 222, 254; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 206, 234, 255; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 227, 243, 255; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 87, 0, 0; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 110, 0, 0; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 138, 0, 0; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 167, 0, 0; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 196, 7, 6; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 221, 33, 24; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 238, 67, 49; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 249, 99, 76; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 255, 129, 107; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 158, 140; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 183, 169; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 205, 195; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 223, 217; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 237, 234; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 72, 24, 1; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 92, 32, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 115, 43, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 138, 55, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 162, 68, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 186, 82, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 210, 98, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 232, 116, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 249, 137, 23; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 255, 162, 59; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 188, 102; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 253, 210, 145; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 226, 181; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 239, 213; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 53, 36, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 68, 47, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 86, 62, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 103, 77, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 122, 92, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 141, 108, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 161, 126, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 180, 144, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 199, 162, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 216, 181, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 233, 199, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 247, 216, 4; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 233, 97; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 252, 243, 170; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 32, 43, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 42, 56, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 54, 72, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 66, 88, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 79, 105, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 93, 123, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 107, 142, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 122, 161, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 138, 180, 3; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 154, 198, 11; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 170, 216, 22; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 187, 232, 41; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 205, 246, 72; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 225, 253, 132; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 0, 47, 7; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 0, 61, 9; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 0, 77, 12; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 0, 95, 15; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 0, 113, 15; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 0, 132, 15; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 0, 151, 20; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 13, 171, 37; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 45, 191, 58; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 80, 208, 82; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 115, 224, 107; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 147, 237, 131; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 180, 247, 162; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 213, 252, 202; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 10, 44, 28; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 7, 59, 36; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 76, 46; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 93, 57; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 0, 111, 69; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 0, 130, 82; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 0, 149, 98; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 28, 168, 114; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 52, 187, 132; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 75, 205, 149; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 103, 222, 168; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 137, 236, 188; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 177, 244, 209; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 214, 249, 228; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 18, 43, 42; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 19, 57, 55; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 16, 73, 70; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 3, 91, 88; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 0, 108, 104; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 0, 127, 121; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 146, 140; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 0, 165, 159; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 26, 185, 178; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 66, 202, 195; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 102, 218, 211; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 139, 232, 225; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 179, 242, 237; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 215, 248, 244; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 0, 41, 68; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 54, 88; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 69, 108; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 86, 128; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 103, 147; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 0, 121, 167; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 0, 140, 186; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 4, 160, 205; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 23, 180, 221; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 57, 199, 234; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 96, 216, 243; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 134, 230, 250; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 170, 242, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 206, 249, 255; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 26, 29, 97; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 39, 125; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 46, 50, 158; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 58, 63, 189; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 73, 78, 216; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 90, 96, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 110, 115, 246; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 132, 136, 253; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 153, 157, 255; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 174, 177, 255; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 194, 196, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 212, 213, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 227, 228, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 240, 240, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 50, 16, 104; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 67, 13, 140; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 86, 16, 173; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 106, 29, 200; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 126, 49, 222; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 145, 70, 236; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 162, 94, 246; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 178, 119, 250; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 192, 143, 252; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 206, 166, 253; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 219, 188, 254; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 230, 207, 255; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 240, 224, 255; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 248, 237, 255; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 70, 14, 68; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 93, 9, 92; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 120, 0, 120; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 146, 0, 147; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 169, 19, 170; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 191, 43, 191; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 211, 65, 213; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 228, 91, 229; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 239, 120, 238; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 246, 149, 243; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 251, 175, 246; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 254, 199, 248; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 255, 220, 250; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 255, 235, 252; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 83, 3, 41; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 106, 0, 52; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 133, 0, 65; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 161, 0, 78; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 186, 22, 93; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 209, 43, 114; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 227, 69, 137; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 241, 97, 156; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 252, 124, 173; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 152, 191; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 179, 207; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 202, 221; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 221, 233; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 236, 243; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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); } - :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-background-color: var(--spectrum-gray-200); --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 + --spectrum-transparent-white-200 ); --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 + --spectrum-transparent-black-200 ); --spectrum-background-opacity-default: 0; --spectrum-background-opacity-hover: 0.1; @@ -566,13 +1032,13 @@ --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-down: var(--spectrum-gray-900); --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-down: var(--spectrum-accent-color-1100); --spectrum-accent-content-color-key-focus: var( --spectrum-accent-color-1000 ); @@ -582,16 +1048,16 @@ --spectrum-negative-content-color-hover: var( --spectrum-negative-color-1000 ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); --spectrum-negative-content-color-key-focus: var( --spectrum-negative-color-1000 ); --spectrum-disabled-content-color: var(--spectrum-gray-400); --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 + --spectrum-transparent-white-500 ); --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 + --spectrum-transparent-black-500 ); --spectrum-disabled-border-color: var(--spectrum-gray-300); --spectrum-disabled-static-white-border-color: var( @@ -612,16 +1078,6 @@ --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); @@ -674,34 +1130,114 @@ --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-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.1; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.25; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.4; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.55; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.7; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.8; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.9; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb) + ); + --spectrum-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.1; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.25; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.4; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.55; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.7; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.8; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.9; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb) + ); --spectrum-icon-color-inverse: var(--spectrum-gray-50); --spectrum-icon-color-primary-default: var( --spectrum-neutral-content-color-default @@ -733,10 +1269,7 @@ --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 ); @@ -870,31 +1403,11 @@ --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; @@ -910,7 +1423,6 @@ --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; @@ -920,22 +1432,6 @@ --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); @@ -950,8 +1446,6 @@ --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); @@ -966,8 +1460,6 @@ --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); @@ -982,8 +1474,6 @@ --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); @@ -998,20 +1488,6 @@ --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; @@ -1048,13 +1524,10 @@ ); --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 @@ -1142,15 +1615,9 @@ --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 ); @@ -1250,7 +1717,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( @@ -1456,7 +1923,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; @@ -1500,47 +1967,7 @@ --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; @@ -1593,34 +2020,6 @@ --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; @@ -1696,22 +2095,6 @@ --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; @@ -1942,10 +2325,6 @@ --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; @@ -2082,133 +2461,36 @@ --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-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.15; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-200); + --spectrum-background-layer-1-color: var(--spectrum-gray-100); + --spectrum-background-layer-2-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-subdued-background-color-default: var( - --spectrum-gray-700 + --spectrum-gray-600 ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 + --spectrum-gray-700 ); --spectrum-accent-background-color-default: var( --spectrum-accent-color-900 ); --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100); --spectrum-accent-background-color-key-focus: var( --spectrum-accent-color-1000 ); @@ -2219,7 +2501,7 @@ --spectrum-informative-color-1000 ); --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 + --spectrum-informative-color-1100 ); --spectrum-informative-background-color-key-focus: var( --spectrum-informative-color-1000 @@ -2231,7 +2513,7 @@ --spectrum-negative-color-1000 ); --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 + --spectrum-negative-color-1100 ); --spectrum-negative-background-color-key-focus: var( --spectrum-negative-color-1000 @@ -2243,7 +2525,7 @@ --spectrum-positive-color-1000 ); --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 + --spectrum-positive-color-1100 ); --spectrum-positive-background-color-key-focus: var( --spectrum-positive-color-1000 @@ -2287,426 +2569,398 @@ --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-gray-50-rgb: 255, 255, 255; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 253, 253, 253; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 248, 248, 248; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 230, 230, 230; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 213, 213, 213; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 177, 177, 177; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 144, 144, 144; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 109, 109, 109; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 70, 70, 70; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 34, 34, 34; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 0, 0, 0; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 224, 242, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 202, 232, 255; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 181, 222, 255; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 150, 206, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 120, 187, 250; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 89, 167, 246; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 56, 146, 243; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 20, 122, 243; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 2, 101, 220; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 0, 84, 182; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 0, 68, 145; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 0, 53, 113; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 0, 39, 84; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 0, 28, 60; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 255, 235, 231; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 221, 214; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 205, 195; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 183, 169; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 155, 136; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 124, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 247, 92, 70; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 234, 56, 41; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 211, 21, 16; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 180, 0, 0; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 147, 0, 0; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 116, 0, 0; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 89, 0, 0; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 67, 0, 0; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 255, 236, 204; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 223, 173; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 253, 210, 145; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 187, 99; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 160, 55; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 246, 133, 17; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 228, 111, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 203, 93, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 177, 76, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 149, 61, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 122, 47, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 97, 35, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 73, 25, 1; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 53, 18, 1; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 251, 241, 152; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 248, 231, 80; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 248, 217, 4; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 232, 198, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 215, 179, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 196, 159, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 176, 140, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 155, 120, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 133, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 112, 83, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 91, 67, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 72, 51, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 54, 37, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 40, 26, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 219, 252, 110; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 203, 244, 67; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 188, 233, 42; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 170, 216, 22; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 152, 197, 10; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 135, 177, 3; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 118, 156, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 103, 136, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 87, 116, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 72, 96, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 58, 77, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 44, 59, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 33, 44, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 24, 31, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 205, 252, 191; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 174, 246, 157; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 150, 238, 133; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 114, 224, 106; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 78, 207, 80; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 39, 187, 54; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 7, 167, 33; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 0, 145, 18; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 0, 124, 15; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 0, 103, 15; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 0, 83, 13; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 0, 64, 10; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 0, 48, 7; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 0, 34, 5; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 206, 248, 224; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 173, 244, 206; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 137, 236, 188; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 103, 222, 168; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 73, 204, 147; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 47, 184, 128; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 21, 164, 110; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 0, 143, 93; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 0, 122, 77; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 0, 101, 62; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 0, 81, 50; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 5, 63, 39; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 10, 46, 29; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 10, 32, 21; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 206, 247, 243; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 170, 241, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 140, 233, 226; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 101, 218, 210; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 63, 201, 193; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 15, 181, 174; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 161, 154; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 0, 140, 135; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 0, 119, 114; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 0, 99, 95; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 12, 79, 76; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 18, 60, 58; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 18, 44, 43; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 15, 31, 30; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 197, 248, 255; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 164, 240, 255; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 136, 231, 250; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 96, 216, 243; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 51, 197, 232; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 18, 176, 218; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 1, 156, 200; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 0, 134, 180; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 0, 113, 159; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 0, 93, 137; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 74, 115; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 57, 93; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 42, 70; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 30, 51; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 237, 238, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 224, 226, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 211, 213, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 193, 196, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 172, 175, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 149, 153, 255; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 126, 132, 252; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 104, 109, 244; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 82, 88, 228; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 64, 70, 202; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 50, 54, 168; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 38, 41, 134; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 27, 30, 100; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 20, 22, 72; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 246, 235, 255; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 238, 221, 255; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 230, 208, 255; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 219, 187, 254; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 204, 164, 253; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 189, 139, 252; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 174, 114, 249; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 157, 87, 244; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 137, 61, 231; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 115, 38, 211; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 93, 19, 183; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 71, 12, 148; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 51, 16, 106; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 35, 15, 73; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 255, 233, 252; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 255, 218, 250; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 254, 199, 248; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 251, 174, 246; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 245, 146, 243; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 237, 116, 237; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 224, 85, 226; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 205, 58, 206; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 182, 34, 183; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 157, 3, 158; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 128, 0, 129; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 100, 6, 100; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 71, 14, 70; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 50, 13, 49; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 255, 234, 241; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 220, 232; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 202, 221; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 178, 206; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 149, 189; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 250, 119, 170; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 239, 90, 152; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 222, 61, 130; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 200, 34, 105; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 173, 9, 85; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 142, 0, 69; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 112, 0, 55; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 84, 3, 42; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 60, 6, 29; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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-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; @@ -2759,34 +3013,6 @@ --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; @@ -2862,22 +3088,6 @@ --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; @@ -3108,10 +3318,6 @@ --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; @@ -3248,32 +3454,643 @@ --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'; +} +: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: 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); + --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; @@ -3282,21 +4099,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; @@ -3307,7 +4120,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; @@ -3316,14 +4128,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; @@ -3333,10 +4143,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; @@ -3344,7 +4152,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); @@ -3352,9 +4159,220 @@ --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; } +: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/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index f20b8189ad..81f97927fc 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/dark-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index 95cf0a5a21..c031561a94 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/darkest-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b2b6c63ca3..ce67a1b262 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/large-vars.css */ :host, :root { --spectrum-slider-tick-mark-height: 13px; diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index 53b88bd9b6..d2dc03ed27 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/light-vars.css */ :host, :root { --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 4da4c86aef..1a4d3b8bea 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/medium-vars.css */ :host, :root { --spectrum-slider-tick-mark-height: 10px; diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 228b94e430..78ef5e021f 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -1,3 +1,4 @@ +/* @deprecated these assets should not be used; the custom override values exist in spectrum/global-vars.css */ :host, :root { --system: spectrum; diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css index e7f6691893..7ba20a4b71 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,15 @@ 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 @@ -67,21 +62,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 +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.25 @@ -99,4 +90,16 @@ 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) + ); } diff --git a/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css index 22469fd947..fe18c924a0 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,15 @@ 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 @@ -68,21 +63,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 +82,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 @@ -100,4 +91,16 @@ 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) + ); } diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 0f2af34c27..00942cc11f 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -59,37 +59,42 @@ ); --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); @@ -101,7244 +106,5 @@ --spectrum-docs-static-black-background-color: rgba( 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); + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css index 4f49738fc8..d10ed7bb13 100644 --- a/tools/styles/tokens/spectrum/index.css +++ b/tools/styles/tokens/spectrum/index.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,21 +45,15 @@ 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 @@ -69,21 +62,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); @@ -91,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.25 @@ -101,11 +90,8 @@ 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) @@ -117,7 +103,6 @@ var(--spectrum-swatch-border-color-light-opacity) ); } - :host, :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; @@ -137,7 +122,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 @@ -167,21 +151,15 @@ 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 @@ -190,21 +168,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); @@ -212,7 +187,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 @@ -222,11 +196,8 @@ 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) @@ -238,7 +209,6 @@ var(--spectrum-swatch-border-color-light-opacity) ); } - :host, :root { --spectrum-neutral-background-color-selected-default: var( @@ -300,48 +270,42 @@ ); --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); @@ -353,10 +317,8 @@ --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; @@ -409,32 +371,24 @@ --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; @@ -443,47 +397,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; @@ -493,10 +439,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; @@ -504,7 +448,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); @@ -512,13 +455,10 @@ --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; @@ -538,7 +478,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 @@ -567,21 +506,15 @@ 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 @@ -590,21 +523,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); @@ -612,7 +542,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 @@ -622,11 +551,8 @@ 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) @@ -638,7 +564,6 @@ var(--spectrum-swatch-border-color-light-opacity) ); } - :host, :root { --spectrum-checkbox-control-size-small: 12px; @@ -691,32 +616,24 @@ --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; @@ -725,21 +642,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; @@ -750,7 +663,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; @@ -759,14 +671,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; @@ -776,10 +686,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; @@ -787,7 +695,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); @@ -795,9 +702,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/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index f63d46216e..c8030cad2c 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -50,30 +50,24 @@ --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; @@ -82,47 +76,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 +118,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 +127,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 +134,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..31e80bc046 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,15 @@ 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-rgb); - + --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 @@ -67,21 +62,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 +81,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 @@ -99,4 +90,16 @@ 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) + ); } diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 2e813d2af1..2cb4820676 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -50,30 +50,24 @@ --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; @@ -82,21 +76,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 +97,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 +105,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 +120,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 +129,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 +136,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/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css new file mode 100644 index 0000000000..0ca0482d35 --- /dev/null +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -0,0 +1,6958 @@ +: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-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 + ); + --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 + ); + --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-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); + --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/theme/src/express/scale-large-core-tokens.css b/tools/theme/src/express/scale-large-core-tokens.css index dc5c44ac49..574ddc4ab5 100644 --- a/tools/theme/src/express/scale-large-core-tokens.css +++ b/tools/theme/src/express/scale-large-core-tokens.css @@ -11,8 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-large-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/large-vars.css'); :root, diff --git a/tools/theme/src/express/scale-large.css b/tools/theme/src/express/scale-large.css index ddc4a8988f..f8d09c76d4 100644 --- a/tools/theme/src/express/scale-large.css +++ b/tools/theme/src/express/scale-large.css @@ -12,8 +12,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/express/scale-large.css'); @import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-large-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/large-vars.css'); :root, diff --git a/tools/theme/src/express/scale-medium-core-tokens.css b/tools/theme/src/express/scale-medium-core-tokens.css index 829830af25..4e384f05e5 100644 --- a/tools/theme/src/express/scale-medium-core-tokens.css +++ b/tools/theme/src/express/scale-medium-core-tokens.css @@ -11,8 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-medium-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/medium-vars.css'); :root, diff --git a/tools/theme/src/express/scale-medium.css b/tools/theme/src/express/scale-medium.css index 41080f8c96..106202e8e8 100644 --- a/tools/theme/src/express/scale-medium.css +++ b/tools/theme/src/express/scale-medium.css @@ -10,11 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/express/scale-medium.css'); @import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-medium-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/medium-vars.css'); +@import url('@spectrum-web-components/styles/express/scale-medium.css'); :root, :host { diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css index 5f408023e1..ad36016b83 100644 --- a/tools/theme/src/express/theme-core-tokens.css +++ b/tools/theme/src/express/theme-core-tokens.css @@ -11,9 +11,9 @@ 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/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/system-theme-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..33d91e4081 100644 --- a/tools/theme/src/express/theme.css +++ b/tools/theme/src/express/theme.css @@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/express/core-global.css'); @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/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/express/core-global.css'); +@import url('@spectrum-web-components/styles/tokens/express/system-theme-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/scale-large-core-tokens.css b/tools/theme/src/scale-large-core-tokens.css index 540a390895..af4f5a50cb 100644 --- a/tools/theme/src/scale-large-core-tokens.css +++ b/tools/theme/src/scale-large-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); :root, diff --git a/tools/theme/src/scale-large.css b/tools/theme/src/scale-large.css index 25d0908ced..81a0b9b6ef 100644 --- a/tools/theme/src/scale-large.css +++ b/tools/theme/src/scale-large.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/scale-large.css'); @import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); :root, diff --git a/tools/theme/src/scale-medium-core-tokens.css b/tools/theme/src/scale-medium-core-tokens.css index be75208988..26686b8a8c 100644 --- a/tools/theme/src/scale-medium-core-tokens.css +++ b/tools/theme/src/scale-medium-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); :root, diff --git a/tools/theme/src/scale-medium.css b/tools/theme/src/scale-medium.css index a3b3c5b1d5..bfba8a20bc 100644 --- a/tools/theme/src/scale-medium.css +++ b/tools/theme/src/scale-medium.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/scale-medium.css'); @import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); :root, 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..4b540bef4d 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/system-theme-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..08041fd067 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/system-theme-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..34c339d7d0 100644 --- a/tools/theme/src/theme-core-tokens.css +++ b/tools/theme/src/theme-core-tokens.css @@ -12,7 +12,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/system-theme-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..79d2d47853 100644 --- a/tools/theme/src/theme.css +++ b/tools/theme/src/theme.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/core-global.css'); @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/system-theme-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/yarn.lock b/yarn.lock index 8b43418986..1aa9ab6870 100644 --- a/yarn.lock +++ b/yarn.lock @@ -245,9 +245,9 @@ __metadata: "@webcomponents/webcomponentsjs": "npm:^2.8.0" alex: "npm:^11.0.1" cem-plugin-module-file-extensions: "npm:^0.0.5" - chalk: "npm:^5.0.1" chromatic: "npm:^11.20.0" chromedriver: "npm:^130.0.1" + colors: "npm:^1.4.0" common-tags: "npm:^1.8.2" custom-elements-manifest: "npm:^2.0.0" debounce: "npm:^2.0.0" @@ -7664,15 +7664,6 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/commons@npm:11.0.0-s2-foundations.15": - version: 11.0.0-s2-foundations.15 - resolution: "@spectrum-css/commons@npm:11.0.0-s2-foundations.15" - peerDependencies: - "@spectrum-css/tokens": ">=14" - checksum: 10c0/c3692f7abae101dc3e45785a9f8213a59d001b006beb6fb796da524c09c3c2ce7b9b76ccaffde9afff7785644be21f51d8aeab6203a0277eb5b87eb63206853a - languageName: node - linkType: hard - "@spectrum-css/contextualhelp@npm:4.0.0-s2-foundations.16": version: 4.0.0-s2-foundations.16 resolution: "@spectrum-css/contextualhelp@npm:4.0.0-s2-foundations.16" @@ -8126,13 +8117,13 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.18": - version: 7.0.0-s2-foundations.18 - resolution: "@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.18" +"@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.17": + version: 7.0.0-s2-foundations.17 + resolution: "@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.17" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=2" "@spectrum-css/tokens": ">=14" - checksum: 10c0/b20a00f987dec6d8abcd9229b3aeaf596aa838ff5926e1a79ef3f41367477f36f3c6a52cfd1f79f8482c63cc35c25340dd95b85218987a326121a204e078b86b + checksum: 10c0/fd8b82fbd72e38ed76d4d7028b46630d21e8ca359616e55c5788d1bc602c66678b3c069693fc8255e5d85faaa92ad07d68eac15aa548fb378c40170fa2e5d434 languageName: node linkType: hard @@ -8155,10 +8146,10 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.3.1": - version: 14.3.1 - resolution: "@spectrum-css/tokens@npm:14.3.1" - checksum: 10c0/b98034c2b7a22f263b31ae1259b1bccf67b43f78c26cd30564a3da7cba84fb68b4fab81e87d4104d72fb3325db0bedc3099dfdf2889556df559995cd7f454b51 +"@spectrum-css/tokens@npm:15.0.0": + version: 15.0.0 + resolution: "@spectrum-css/tokens@npm:15.0.0" + checksum: 10c0/8bf9832e18cf7edcf89904e3d4aa67e060c88633dc7db1432a198bd4de3c7b68eaf99c2c213402bb70cbd6e82c51f958abb8d48f98eb807894c5ebc23f0bcfbb languageName: node linkType: hard @@ -9129,9 +9120,8 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/styles@workspace:tools/styles" dependencies: - "@spectrum-css/commons": "npm:11.0.0-s2-foundations.15" "@spectrum-css/expressvars": "npm:^3.0.9" - "@spectrum-css/tokens": "npm:14.3.1" + "@spectrum-css/tokens": "npm:15.0.0" "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.27" "@spectrum-css/typography": "npm:7.0.0-s2-foundations.17" "@spectrum-css/vars": "npm:^9.0.8" @@ -9234,7 +9224,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/thumbnail@workspace:packages/thumbnail" dependencies: - "@spectrum-css/thumbnail": "npm:7.0.0-s2-foundations.18" + "@spectrum-css/thumbnail": "npm:7.0.0-s2-foundations.17" "@spectrum-web-components/base": "npm:^1.0.1" "@spectrum-web-components/opacity-checkerboard": "npm:^1.0.1" languageName: unknown @@ -15119,7 +15109,7 @@ __metadata: languageName: node linkType: hard -"colors@npm:1.4.0": +"colors@npm:1.4.0, colors@npm:^1.4.0": version: 1.4.0 resolution: "colors@npm:1.4.0" checksum: 10c0/9af357c019da3c5a098a301cf64e3799d27549d8f185d86f79af23069e4f4303110d115da98483519331f6fb71c8568d5688fa1c6523600044fd4a54e97c4efb From 8fe05ed4c57501acf415b2bec318a3d97aad0522 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Wed, 15 Jan 2025 09:57:02 -0500 Subject: [PATCH 2/2] chore: add jsdoc to tasks/css-tools.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Rúben Carvalho --- packages/thumbnail/package.json | 2 +- packages/thumbnail/src/spectrum-thumbnail.css | 275 +++++++++--------- .../thumbnail/src/thumbnail-overrides.css | 83 ------ tasks/css-tools.js | 8 + .../styles/tokens-v2/system-theme-bridge.css | 38 --- .../tokens/express/system-theme-bridge.css | 38 --- .../tokens/spectrum/system-theme-bridge.css | 38 --- yarn.lock | 10 +- 8 files changed, 159 insertions(+), 333 deletions(-) diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index e943513299..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": "7.0.0-s2-foundations.17" + "@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 b080b33de2..f7723b6891 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -11,9 +11,125 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host, +:host([size='500']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); +} + +:host([size='50']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); +} + +:host([size='75']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); +} + +:host([size='100']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); +} + +:host([size='200']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); +} + +:host([size='300']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); +} + +:host([size='400']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); +} + +:host([size='600']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); +} + +:host([size='700']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); +} + +:host([size='800']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); +} + +:host([size='900']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); +} + +:host([size='1000']) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); +} + :host { - inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + --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; @@ -24,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 { @@ -35,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; } @@ -64,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; @@ -163,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; @@ -254,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 1d05cad22d..ef0b80a2f3 100644 --- a/packages/thumbnail/src/thumbnail-overrides.css +++ b/packages/thumbnail/src/thumbnail-overrides.css @@ -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/tasks/css-tools.js b/tasks/css-tools.js index 33a6a40895..336111b6fd 100644 --- a/tasks/css-tools.js +++ b/tasks/css-tools.js @@ -63,6 +63,14 @@ if (fs.existsSync(licensePath)) { header = header.replace('<%= YEAR %>', new Date().getFullYear()); } +/** + * Processes a CSS file using lightningcss, minifies it, and outputs a TypeScript module. + * The output module includes license headers and wraps the CSS in a template literal. + * + * @param {string} cssPath - Path to the CSS file to process + * @returns {Promise} A promise that resolves when processing is complete + * + */ export const processCSS = async (cssPath) => { return bundleAsync({ filename: cssPath, diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css index fa75b4aeaa..c894586955 100644 --- a/tools/styles/tokens-v2/system-theme-bridge.css +++ b/tools/styles/tokens-v2/system-theme-bridge.css @@ -6723,45 +6723,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); - --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); --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css index af1303b90e..f968128044 100644 --- a/tools/styles/tokens/express/system-theme-bridge.css +++ b/tools/styles/tokens/express/system-theme-bridge.css @@ -6719,45 +6719,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); - --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); --system-toast-background-color-default: var( --spectrum-neutral-background-color-default ); diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css index 0ca0482d35..97a0203922 100644 --- a/tools/styles/tokens/spectrum/system-theme-bridge.css +++ b/tools/styles/tokens/spectrum/system-theme-bridge.css @@ -6725,45 +6725,7 @@ --system-textfield-size-xl-text-area-min-block-size-quiet: var( --spectrum-component-height-300 ); - --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); --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); diff --git a/yarn.lock b/yarn.lock index 1aa9ab6870..d80a2aa7ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8117,13 +8117,13 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.17": - version: 7.0.0-s2-foundations.17 - resolution: "@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.17" +"@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.18": + version: 7.0.0-s2-foundations.18 + resolution: "@spectrum-css/thumbnail@npm:7.0.0-s2-foundations.18" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=2" "@spectrum-css/tokens": ">=14" - checksum: 10c0/fd8b82fbd72e38ed76d4d7028b46630d21e8ca359616e55c5788d1bc602c66678b3c069693fc8255e5d85faaa92ad07d68eac15aa548fb378c40170fa2e5d434 + checksum: 10c0/b20a00f987dec6d8abcd9229b3aeaf596aa838ff5926e1a79ef3f41367477f36f3c6a52cfd1f79f8482c63cc35c25340dd95b85218987a326121a204e078b86b languageName: node linkType: hard @@ -9224,7 +9224,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/thumbnail@workspace:packages/thumbnail" dependencies: - "@spectrum-css/thumbnail": "npm:7.0.0-s2-foundations.17" + "@spectrum-css/thumbnail": "npm:7.0.0-s2-foundations.18" "@spectrum-web-components/base": "npm:^1.0.1" "@spectrum-web-components/opacity-checkerboard": "npm:^1.0.1" languageName: unknown