diff --git a/package.json b/package.json index caff621267..eba6c80909 100755 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@custom-elements-manifest/analyzer": "^0.9.0", "@geometricpanda/storybook-addon-badges": "^2.0.2", "@lit/react": "^1.0.4", - "@netlify/build": "^29.17.3", + "@netlify/build": "^29.56.1", "@open-wc/dev-server-hmr": "^0.2.0", "@open-wc/testing": "^4.0.0", "@playwright/test": "^1.44.0", @@ -142,8 +142,8 @@ "@webcomponents/webcomponentsjs": "^2.8.0", "alex": "^11.0.1", "cem-plugin-module-file-extensions": "^0.0.5", - "chalk": "^5.0.1", "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-overrides.css b/packages/accordion/src/accordion-overrides.css index 1ae096160a..ee2ab43ff1 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 d469d71575..19fdd53045 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 4a25ed444b..7641651c8d 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-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 2a30e0304e..c968b128be 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -188,10 +188,7 @@ governing permissions and limitations under the License. --spectrum-actionbutton-border-color: transparent; } -:host([emphasized]):not( - .spectrum-ActionButton--staticBlack, - .spectrum-ActionButton--staticWhite - ) { +:host([emphasized]:not([static-color])) { --mod-actionbutton-background-color-default-selected: var( --mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default) diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js index e7f764e714..4f2d15ad14 100644 --- a/packages/action-button/src/spectrum-config.js +++ b/packages/action-button/src/spectrum-config.js @@ -154,64 +154,27 @@ const config = { }, ], }, - { - find: [ - builder.class('spectrum-ActionButton-hold'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'dir', - operation: { - value: 'rtl', - operator: 'equal', - }, - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('hold-affordance'), - }, - ], - }, { find: { type: 'pseudo-class', kind: 'not', selectors: [ [ - { - type: 'pseudo-class', - kind: 'disabled', - }, + builder.class( + 'spectrum-ActionButton--staticBlack' + ), + ], + [ + builder.class( + 'spectrum-ActionButton--staticWhite' + ), ], ], }, replace: { type: 'pseudo-class', kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], + selectors: [[builder.attribute('static-color')]], }, hoist: true, }, diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css index b3463661a4..38efa5309f 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 e0f1284667..8ef9c34464 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/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css index 3da3b69162..d0eeef749b 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/button/src/button-overrides.css b/packages/button/src/button-overrides.css index 9c50e4b772..25fee270d2 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 a15c714752..47c9ec35be 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 eba7cc11df..bd28d22443 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 e4a8e546b1..4422aaac45 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 a924324cdc..954c3b7cd9 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/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css index f57b5fb01d..0b33a99bcc 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 8813cef33c..03addea8de 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/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 ad296ebd8f..3975a80a46 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/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 6313d70eb8..bc2ab5596b 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 58af37f91e..af3de77e20 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 0e5d0cc8ce..569bfb9280 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/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/scripts/build-css.js b/projects/documentation/scripts/build-css.js index 7431982681..9ccc193f75 100644 --- a/projects/documentation/scripts/build-css.js +++ b/projects/documentation/scripts/build-css.js @@ -32,7 +32,7 @@ const outDir = path.resolve(projectDir, '_site'); const { files } = yargs(hideBin(process.argv)).argv; async function bundle(fileName) { - let { code, map } = await bundleAsync({ + return bundleAsync({ filename: fileName, minify: true, errorRecovery: true, @@ -52,13 +52,12 @@ async function bundle(fileName) { }, }, }); - return { code, map }; } async function main() { for await (const cssSource of await fg(`${projectDir}/${files}`)) { const fileName = cssSource.split(path.sep).at(-1); - const { code, map } = await bundle(cssSource); + const { code } = await bundle(cssSource); await fs.writeFile(path.resolve(outDir, fileName), code); } process.exit(0); diff --git a/projects/documentation/src/components/styles.css b/projects/documentation/src/components/styles.css index 7577c6f13b..c146ffef06 100644 --- a/projects/documentation/src/components/styles.css +++ b/projects/documentation/src/components/styles.css @@ -13,6 +13,7 @@ governing permissions and limitations under the License. @import '@spectrum-web-components/styles/tokens/global-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'; +@import '@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'; @import '@spectrum-web-components/styles/src/spectrum-heading.css'; @import '@spectrum-web-components/styles/src/heading-overrides.css'; @import '@spectrum-web-components/styles/src/spectrum-body.css'; diff --git a/scripts/generate-tokens-wrapper.js b/scripts/generate-tokens-wrapper.js index 1df6d2276a..887f020871 100644 --- a/scripts/generate-tokens-wrapper.js +++ b/scripts/generate-tokens-wrapper.js @@ -9,25 +9,55 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + import fg from 'fast-glob'; +import { transform } from 'lightningcss'; +import prettier from 'prettier'; +import { rimrafSync } from 'rimraf'; + import fs from 'fs-extra'; import path from 'path'; import { fileURLToPath } from 'url'; +import { createRequire } from 'node:module'; +import 'colors'; +const fsp = fs.promises; +const require = createRequire(import.meta.url); const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const tokensRoot = (tokensDir) => { - return path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - tokensDir, - 'dist', - 'css', - '**', - '*.css' - ); +const rootDir = path.join(__dirname, '..'); + +const prettierSettings = { + parser: 'css', + printWidth: 80, + tabWidth: 4, + semi: true, + singleQuote: true, + trailingComma: 'es5', + bracketSpacing: true, + arrowParens: 'always', + htmlWhitespaceSensitivity: 'ignore', +}; + +const log = { + info: (message) => console.log(`${'ℹ'.cyan} ${message}`), + success: (message) => console.log(`${'✓'.green} ${message}`), + warn: (message) => console.log(`${'⚠️'.yellow} ${message}`), + fail: (message) => console.log(`${'✗'.red} ${message}`), +}; + +const relativePath = (from) => path.relative(rootDir, from); + +const getPackagePath = (packageName, namespace = '@spectrum-css/') => { + let filepath; + try { + filepath = require.resolve(`${namespace}${packageName}/package.json`); + } catch (er) { + log.warn(`Could not find package ${namespace.cyan}${packageName.cyan}`); + return; + } + + return path.dirname(filepath); }; /** @todo Could generate this from CSS packages that have @spectrum-css/tokens as a dependency */ @@ -102,21 +132,24 @@ const tokenPackages = [ 'typography', ]; -const packagePaths = tokenPackages.map((packageName) => { - return path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - packageName, - 'dist', - 'themes' - ); -}); +const packagePaths = tokenPackages + .map((packageName) => getPackagePath(packageName)) + .map((filepath) => { + if (!filepath) { + return; + } + + const themeFolder = path.join(filepath, 'dist', 'themes'); + if (fs.existsSync(themeFolder)) { + return themeFolder; + } + + return; + }) + .filter(Boolean); const spectrumThemeSelectorRegExp = /(?:\.spectrum(--(?:express|light(?:est)?|dark(?:est)?|medium|large|legacy)?,?(\n|\s)*)?)+\s?\{/g; -const importantCommentRegExp = /\/\*![^*]*\*+([^\/*][^*]*\*+)*\//g; const targetHost = (css) => { /** @note Could use this regex to more permissive of class names */ @@ -135,124 +168,195 @@ const targetHost = (css) => { return css.replaceAll(spectrumThemeSelectorRegExp, ':host,\n:root {'); }; -const removeImportantComments = (css) => { - /** - * Spectrum CSS uses /*! comments that are "not" removable. - * These comments pile up in merged files, so we _need_ to remove them. - */ - return css.replaceAll(importantCommentRegExp, ''); -}; - /** - * copies @spectrum-css/dist/css/*.css and @spectrum-css/dist/css/**\/*.css - * replaces classes with :root, :host, and pastes them into - * corresponding /tools/styles/*.css and /tools/styles/tokens/**\/*.css - * @param {string} srcPath @spectrum-css/dist/css path - * @param {*} tokensDir styles/tokens path + * Core entry function for generating tokens from Spectrum CSS packages + * to be used by the sp-theme + * @param {'spectrum'|'spectrum-two'} spectrumVersion + * @param {Object} options + * @param {boolean} options.clean - Whether to clean the output directory before writing + * @returns {Promise} */ -const processTokens = (srcPath, tokensDir) => { - let css = fs.readFileSync(srcPath, 'utf8'); - const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); +export async function generateTokensWrapper( + spectrumVersion, + { clean = true } = {} +) { + const isSpectrumOne = spectrumVersion === 'spectrum'; + const tokenPaths = ['tokens', 'tokens-v2']; + const pathIdx = isSpectrumOne ? 0 : 1; + const tokenPackageName = tokenPaths[pathIdx]; + + let tokenSourcePath = getPackagePath(tokenPackageName); + if (tokenSourcePath) { + tokenSourcePath = path.join(tokenSourcePath, 'dist', 'css'); + } - css = removeImportantComments(targetHost(css)); + const outputPath = path.join(__dirname, '..', 'tools', 'styles'); - try { - fs.writeFileSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName), - css - ); - } catch (er) {} -}; -const processPackages = async (tokensDir, index) => { - const packagename = tokenPackages[index]; - - let componentLevelTokensPath = path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - tokensDir, - 'dist', - 'css', - 'components' + // Create the directories if they don't exist + if (clean) { + rimrafSync(path.join(outputPath, tokenPackageName)); + } + + // Only create express directory for tokens not tokens-v2 + if (isSpectrumOne) { + ['spectrum', 'express'].forEach((folder) => { + fs.mkdirSync(path.join(outputPath, tokenPackageName, folder), { + recursive: true, + }); + }); + } else { + fs.mkdirSync(path.join(outputPath, tokenPackageName), { + recursive: true, + }); + } + + /** + * copies @spectrum-css/dist/css/*.css and @spectrum-css/dist/css/**\/*.css + * replaces classes with :root, :host, and pastes them into + * corresponding /tools/styles/*.css and /tools/styles/tokens/**\/*.css + */ + const themeTokens = await fg( + ['*.css', 'spectrum/*.css', 'express/*.css', '!index.css'], + { cwd: tokenSourcePath } ); - return Promise.all( - ['spectrum', 'express', 'spectrum-two'].map((type) => { - const outputDir = type !== 'spectrum-two' ? 'tokens' : 'tokens-v2'; - const outputType = outputDir === 'tokens-v2' ? 'spectrum' : type; - const cssFilePath = path.join( - componentLevelTokensPath, - type, - packagename + '.css' - ); - - // check if cssFilePath exists - if (fs.existsSync(cssFilePath)) { - let content = fs.readFileSync(cssFilePath, 'utf8'); - content = removeImportantComments(targetHost(content)); - fs.appendFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - outputDir, - outputType, - 'global-vars.css' - ), - content + const promises = themeTokens.map(async (fileName) => + fsp + .readFile(path.join(tokenSourcePath, fileName), 'utf8') + .then(async (content) => { + /* If the file is empty, return */ + if (!content) { + return; + } + + const output = path.join( + outputPath, + tokenPackageName, + fileName ); - } - }) + + const { code } = await transform({ + filename: path.join(tokenSourcePath, fileName), + minify: true, + code: Buffer.from(content), + }); + + const formatted = await prettier.format( + targetHost(code.toString()), + prettierSettings + ); + + return fs + .writeFile(output, formatted, { + encoding: 'utf8', + }) + .then(() => { + log.success(`${relativePath(output).yellow} written`); + }); + }) ); -}; + + await Promise.all(promises); + + /* We are only processing component-level variables for S2 output */ + if (isSpectrumOne) { + return; + } + + return processComponentThemes(outputPath); +} /** - * Core entry function + * Every component package has a dist/themes folder with CSS files + * that need to be processed and concatenated into a single file + * - spectrum-two.css files are written to tokens-v2/spectrum/component-vars.css + * - express.css files are written to tokens/express/component-vars.css + * - spectrum.css files are written to tokens/spectrum/component-vars.css + * @param {string} outputPath + * @returns {Promise} */ -export async function generateTokensWrapper(spectrumVersion) { - const isSpectrumOne = Boolean(spectrumVersion === 'spectrum'); - const tokensDir = isSpectrumOne ? 'tokens' : 'tokens-v2'; - - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'), - { - recursive: true, +async function processComponentThemes(outputPath) { + const filename = 'component-bridge.css'; + const writeOptions = { encoding: 'utf-8' }; + const onFinished = async (outputPath) => { + if (!fs.existsSync(outputPath)) { + log.fail(`${relativePath(outputPath)} no written`); + return; } - ); - if (spectrumVersion === 'spectrum') { - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'express'), - { - recursive: true, - } + log.success(`${relativePath(outputPath).yellow} written`); + + // Format, combine, & prettify content + const content = await fsp.readFile(outputPath); + + const { code } = await transform({ + filename: outputPath, + minify: true, + code: Buffer.from(content), + }); + + const formatted = await prettier.format( + targetHost(code.toString()), + prettierSettings ); - } + return fsp.writeFile(outputPath, formatted, { encoding: 'utf8' }); + }; - fs.writeFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - tokensDir, - 'spectrum', - 'global-vars.css' - ), - '' - ); + // Create three write streams for the three different types of themes + const streams = { + spectrum: fs + .createWriteStream( + path.join(outputPath, 'tokens', 'spectrum', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished( + path.join(outputPath, 'tokens', 'spectrum', filename) + ); + }), + express: fs + .createWriteStream( + path.join(outputPath, 'tokens', 'express', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished( + path.join(outputPath, 'tokens', 'express', filename) + ); + }), + 'spectrum-two': fs + .createWriteStream( + path.join(outputPath, 'tokens-v2', filename), + writeOptions + ) + .on('finish', async () => { + return onFinished(path.join(outputPath, 'tokens-v2', filename)); + }), + }; - for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) { - processTokens(tokensPath, tokensDir); - } - if (isSpectrumOne) { - return; + /* Iterate over each component package and concatenate the theme CSS */ + for (const filepath of packagePaths) { + const themes = fg.sync(['*.css'], { cwd: filepath, absolute: true }); + + for (const themePath of themes) { + const theme = path.basename(themePath, '.css'); + const stream = streams[theme]; + + // check if path exists + if (!fs.existsSync(themePath)) { + continue; + } + + const content = fs.readFileSync(themePath, { encoding: 'utf8' }); + + // If the content is empty, return + if (!content) { + continue; + } + + stream.write(content); + } } - return Promise.all( - packagePaths.map((_, index) => { - return processPackages(tokensDir, index); - }) - ); + + Object.values(streams).forEach((stream) => stream.end()); } diff --git a/tasks/css-tools.js b/tasks/css-tools.js index 65aa40e0be..33a6a40895 100644 --- a/tasks/css-tools.js +++ b/tasks/css-tools.js @@ -14,7 +14,37 @@ import path from 'path'; import fs from 'fs'; import { bundleAsync } from 'lightningcss'; import { fileURLToPath } from 'url'; +import { createRequire } from 'node:module'; import { stripIndent } from 'common-tags'; +import 'colors'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); + +const log = { + success: (message) => console.log(`${'✓'.green} ${message}`), + fail: (message) => console.log(`${'✗'.red} ${message}`), +}; + +const getPackagePath = (packageName) => { + let filepath; + + // Escape hatch for local packages: @spectrum-web-components + if (packageName.startsWith('@spectrum-web-components')) { + return path.resolve( + path.join(__dirname, '..', 'node_modules', packageName) + ); + } + + try { + filepath = require.resolve(packageName); + } catch (er) { + log.fail(`Could not find ${packageName} installed as a dependency`); + return new Error(er); + } + + return filepath; +}; const wrapCSSResult = (content) => { return stripIndent` @@ -26,22 +56,15 @@ const wrapCSSResult = (content) => { `; }; -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const nodeModulesDir = path.resolve(__dirname, '..', 'node_modules'); -const configPath = path.resolve(path.join(__dirname, '..', 'config')); -let header; -try { - header = fs.readFileSync(path.join(configPath, 'license.js'), 'utf8'); -} catch (error) { - throw new Error(error); +const licensePath = path.resolve(__dirname, '..', 'config', 'license.js'); +let header = ''; +if (fs.existsSync(licensePath)) { + header = fs.readFileSync(licensePath, 'utf8'); + header = header.replace('<%= YEAR %>', new Date().getFullYear()); } -header = header.replace('<%= YEAR %>', new Date().getFullYear()); - export const processCSS = async (cssPath) => { - let wrappedCSS = header; - console.log(cssPath); - let { code, map } = await bundleAsync({ + return bundleAsync({ filename: cssPath, minify: true, errorRecovery: true, @@ -52,16 +75,24 @@ export const processCSS = async (cssPath) => { }, resolve(specifier, from) { if (specifier.startsWith('./')) { - const resolution = path.resolve(from, '..', specifier); - return resolution; + return path.resolve(from, '..', specifier); } else { - const resolution = path.resolve(nodeModulesDir, specifier); - return resolution; + return getPackagePath(specifier); } }, }, - }); - console.log(cssPath); - wrappedCSS += wrapCSSResult(code); - fs.writeFileSync(cssPath + '.ts', wrappedCSS, 'utf-8'); + }) + .then(({ code }) => { + log.success(cssPath.yellow + ' bundled successfully'); + + fs.writeFileSync( + `${cssPath}.ts`, + header + wrapCSSResult(code), + 'utf-8' + ); + }) + .catch((er) => { + log.fail(cssPath.yellow + ' failed to bundle'); + console.error(er); + }); }; diff --git a/tasks/process-spectrum.js b/tasks/process-spectrum.js index e3276c6479..8d7d117f99 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'; @@ -639,13 +639,13 @@ 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]*\*\//, '') @@ -842,7 +842,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 +850,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/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css index 5650eb9ef0..99d9d575a0 100644 --- a/tools/styles/express/spectrum-scale-large.css +++ b/tools/styles/express/spectrum-scale-large.css @@ -268,9 +268,6 @@ --spectrum-alias-avatar-size-100: 26px; --spectrum-alias-avatar-size-400: 36px; --spectrum-alias-avatar-size-600: 46px; - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-xs-text-size ); diff --git a/tools/styles/express/spectrum-scale-medium.css b/tools/styles/express/spectrum-scale-medium.css index ff17b1a3fa..7f3badd091 100644 --- a/tools/styles/express/spectrum-scale-medium.css +++ b/tools/styles/express/spectrum-scale-medium.css @@ -272,7 +272,6 @@ --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-s-text-size ); diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css index 42038762ff..e9b051bd23 100644 --- a/tools/styles/spectrum-scale-large.css +++ b/tools/styles/spectrum-scale-large.css @@ -279,9 +279,6 @@ --spectrum-alias-tag-focusring-border-radius: var( --spectrum-global-dimension-static-size-75 ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-xs-text-size ); diff --git a/tools/styles/spectrum-scale-medium.css b/tools/styles/spectrum-scale-medium.css index 67c09f4f63..050b1c444a 100644 --- a/tools/styles/spectrum-scale-medium.css +++ b/tools/styles/spectrum-scale-medium.css @@ -277,7 +277,6 @@ --spectrum-alias-tag-focusring-border-radius: var( --spectrum-global-dimension-static-size-65 ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-s-text-size ); diff --git a/tools/styles/spectrum-two/spectrum-scale-large.css b/tools/styles/spectrum-two/spectrum-scale-large.css index 42038762ff..e9b051bd23 100644 --- a/tools/styles/spectrum-two/spectrum-scale-large.css +++ b/tools/styles/spectrum-two/spectrum-scale-large.css @@ -279,9 +279,6 @@ --spectrum-alias-tag-focusring-border-radius: var( --spectrum-global-dimension-static-size-75 ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-xs-text-size ); diff --git a/tools/styles/spectrum-two/spectrum-scale-medium.css b/tools/styles/spectrum-two/spectrum-scale-medium.css index 67c09f4f63..050b1c444a 100644 --- a/tools/styles/spectrum-two/spectrum-scale-medium.css +++ b/tools/styles/spectrum-two/spectrum-scale-medium.css @@ -277,7 +277,6 @@ --spectrum-alias-tag-focusring-border-radius: var( --spectrum-global-dimension-static-size-65 ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); --spectrum-dialog-confirm-title-text-size: var( --spectrum-alias-heading-s-text-size ); 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/component-bridge.css b/tools/styles/tokens-v2/component-bridge.css new file mode 100644 index 0000000000..4d21c97ab9 --- /dev/null +++ b/tools/styles/tokens-v2/component-bridge.css @@ -0,0 +1,3395 @@ +:host, +:root { + --system-accordion-divider-color: var(--spectrum-gray-200); + --system-action-bar-popover-background-color: var(--spectrum-gray-25); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-50); + --system-action-button-background-color-hover: var(--spectrum-gray-100); + --system-action-button-background-color-down: var(--spectrum-gray-200); + --system-action-button-background-color-focus: var(--spectrum-gray-100); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-100 + ); + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-action-button-content-color-selected: var(--spectrum-gray-50); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-100 + ); + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-200 + ); + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-100 + ); + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-700 + ); + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-quiet-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-quiet-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-quiet-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-quiet-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-700 + ); + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-quiet-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-quiet-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-quiet-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-quiet-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-asset-folder-background-color: var(--spectrum-gray-200); + --system-asset-file-background-color: var(--spectrum-gray-25); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-50); + --system-button-background-color-hover: var(--spectrum-gray-100); + --system-button-background-color-down: var(--spectrum-gray-200); + --system-button-background-color-focus: var(--spectrum-gray-100); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-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-primary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-100 + ); + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-200 + ); + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-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-outline-border-color-default: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-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-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-border-color-default: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-700 + ); + --system-button-static-black-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-black-600 + ); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-checkmark-color: var(--spectrum-gray-50); + --system-checkbox-control-corner-radius: 2px; + --system-card-border-color: var(--spectrum-gray-100); + --system-card-border-color-hover: var(--spectrum-gray-200); + --system-card-divider-color: var(--spectrum-gray-200); + --system-card-preview-background-color: var(--spectrum-gray-100); + --system-card-preview-background-color-hover: var(--spectrum-gray-200); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-400 + ); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-100); + --system-close-button-background-color-down: var(--spectrum-gray-200); + --system-close-button-background-color-focus: var(--spectrum-gray-100); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-color-wheel-border-color: var(--spectrum-transparent-black-300); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-800); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --system-combobox-border-color-key-focus: var(--spectrum-gray-800); + --system-combobox-background-color-disabled: var(--spectrum-gray-25); + --system-divider-background-color-small: var(--spectrum-gray-200); + --system-divider-background-color-medium: var(--spectrum-gray-200); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-400 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-400 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-900 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-400 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-400 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-900 + ); + --system-drop-zone-border-color: var(--spectrum-gray-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-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-background-color: var(--spectrum-gray-50); + --system-infield-button-background-color-hover: var(--spectrum-gray-100); + --system-infield-button-background-color-down: var(--spectrum-gray-200); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-100 + ); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var( + --spectrum-component-height-300 + ); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-inline-size: var(--spectrum-meter-width); + --system-meter-top-to-text: var(--spectrum-component-top-to-text); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-background-layer-2-color); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-background-color-default: var(--spectrum-gray-100); + --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-800); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-900); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-900); + --system-picker-border-color-disabled: var(--spectrum-gray-300); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-button-background-color: var(--spectrum-gray-50); + --system-picker-button-background-color-hover: var(--spectrum-gray-100); + --system-picker-button-background-color-down: var(--spectrum-gray-200); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-500 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-200); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-400 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-progress-circle-track-border-color: var(--spectrum-gray-200); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-400 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-1000 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-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-25); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-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-100); + --system-side-nav-item-background-down: var(--spectrum-gray-200); + --system-side-nav-background-key-focus: var(--spectrum-gray-100); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-100 + ); + --system-side-nav-background-hover-selected: var(--spectrum-gray-200); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: 2px; + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var( + --spectrum-slider-track-thickness + ); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var( + --spectrum-slider-handle-size-medium + ); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-500 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var( + --spectrum-slider-handle-size-small + ); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-500 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var( + --spectrum-spacing-100 + ); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var( + --spectrum-slider-handle-size-large + ); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var( + --spectrum-component-height-300 + ); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-75); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-200); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: 2px; + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var( + --spectrum-red-visual-color + ); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-background-color: var(--spectrum-gray-25); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-stepper-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-button-background-color-focus: var(--spectrum-gray-300); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-100 + ); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-stepper-border-color-hover-invalid: var( + --spectrum-negative-border-color-hover + ); + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-stepper-button-border-color-quiet: transparent; + --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 + ); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-1000-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --system-swatch-disabled-icon-color: var(--spectrum-gray-25); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-200); + --system-switch-background-color-disabled: var(--spectrum-gray-200); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-switch-handle-background-color: var(--spectrum-gray-50); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-200); + --system-table-divider-color: var(--spectrum-gray-200); + --system-table-header-background-color: var( + --spectrum-transparent-white-25 + ); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-25); + --system-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-100); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-100); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var( + --spectrum-component-height-100 + ); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var( + --spectrum-component-height-200 + ); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var( + --spectrum-text-to-visual-300 + ); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-25 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-25 + ); + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-200); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var( + --spectrum-tab-item-top-to-text-small + ); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var( + --spectrum-tab-item-top-to-text-large + ); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-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-50); + --system-tag-background-color-hover: var(--spectrum-gray-50); + --system-tag-background-color-active: var(--spectrum-gray-100); + --system-tag-background-color-focus: var(--spectrum-gray-50); + --system-tag-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-25); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --system-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --system-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius + ); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-25); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color + ); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); + --system-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-400); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --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-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css index 623226821c..761a55d19a 100644 --- a/tools/styles/tokens-v2/dark-vars.css +++ b/tools/styles/tokens-v2/dark-vars.css @@ -954,7 +954,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 @@ -964,9 +963,7 @@ 0.15 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.15 @@ -995,37 +992,27 @@ 0.07 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-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-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-swatch-border-color-rgb: 255, 255, 255; - --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity) @@ -1036,7 +1023,6 @@ var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity) ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.07 diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index 38cdb68585..ea7539a297 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,24 +1020,21 @@ --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); --spectrum-code-color: var(--spectrum-gray-800); --system: spectrum; - - --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-linear: cubic-bezier(0, 0, 1, 1); - --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); @@ -1047,24 +1044,19 @@ 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); diff --git a/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css deleted file mode 100644 index 5de1bf44c6..0000000000 --- a/tools/styles/tokens-v2/index.css +++ /dev/null @@ -1,4486 +0,0 @@ -:host, -:root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-800 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-700 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-800 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-700 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-800 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-700 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-800 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-700 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-800); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-800); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); - --spectrum-blue-background-color-default: var(--spectrum-blue-800); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); - --spectrum-purple-background-color-default: var(--spectrum-purple-800); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-900); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-900); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-800); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); - --spectrum-pink-background-color-default: var(--spectrum-pink-800); - --spectrum-silver-background-color-default: var(--spectrum-silver-800); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-800 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.36; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.48; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.6; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-300 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-300 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-300 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-300 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-300 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-300 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-300 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-300 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-300 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-300 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-300 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-300 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-300 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 17, 17, 17; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 27, 27, 27; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 34, 34, 34; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 44, 44, 44; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 50, 50, 50; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 57, 57, 57; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 68, 68, 68; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 109, 109, 109; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 138, 138, 138; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 175, 175, 175; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 219, 219, 219; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 242, 242, 242; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 255, 255, 255; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 14, 23, 63; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 15, 28, 82; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 12, 33, 117; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 18, 45, 154; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 26, 58, 195; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 37, 73, 229; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 91, 248; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 64, 105, 253; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 86, 129, 255; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 105, 149, 254; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 124, 169, 252; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 152, 192, 252; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 181, 213, 253; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 213, 231, 254; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 238, 245, 255; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 255, 255, 255; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 54, 10, 3; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 68, 13, 5; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 87, 17, 7; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 115, 24, 11; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 147, 31, 17; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 177, 38, 23; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 205, 46, 29; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 223, 52, 34; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 252, 67, 46; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 103, 86; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 134, 120; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 167, 157; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 196, 189; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 222, 219; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 255, 242, 240; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 255, 255, 255; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 49, 16, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 61, 21, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 80, 27, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 106, 36, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 135, 47, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 162, 59, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 185, 73, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 199, 82, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 224, 100, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 243, 117, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 137, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 173, 45; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 201, 116; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 225, 178; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 255, 243, 225; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 255, 255, 255; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 37, 23, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 47, 29, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 61, 39, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 83, 52, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 107, 67, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 130, 82, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 151, 97, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 164, 106, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 186, 124, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 203, 141, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 218, 159, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 235, 183, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 206, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 230, 86; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 255, 246, 195; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 255, 255, 255; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 23, 28, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 30, 36, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 39, 47, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 53, 63, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 68, 82, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 83, 100, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 97, 116, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 106, 127, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 122, 147, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 136, 164, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 151, 181, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 169, 203, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 187, 225, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 219, 240, 117; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 242, 249, 206; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 255, 255, 255; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 11, 31, 0; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 15, 38, 0; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 21, 51, 1; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 31, 67, 4; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 41, 86, 8; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 50, 105, 11; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 60, 122, 15; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 66, 134, 18; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 78, 154, 23; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 88, 172, 28; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 100, 190, 35; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 116, 213, 46; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 136, 234, 65; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 170, 251, 112; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 222, 255, 198; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 255, 255, 255; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 0, 30, 23; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 38, 29; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 51, 38; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 68, 48; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 2, 87, 58; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 3, 106, 67; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 4, 124, 75; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 6, 136, 80; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 9, 157, 89; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 14, 175, 98; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 24, 193, 110; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 57, 215, 134; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 126, 231, 172; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 189, 241, 208; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 229, 250, 236; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 255, 255, 255; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 0, 30, 27; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 0, 39, 35; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 0, 50, 44; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 67, 59; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 2, 86, 75; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 4, 105, 89; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 6, 122, 103; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 8, 134, 112; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 10, 154, 128; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 12, 173, 142; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 14, 190, 156; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 29, 214, 176; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 122, 229, 203; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 186, 241, 222; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 229, 249, 243; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 255, 255, 255; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 0, 29, 39; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 36, 49; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 48, 65; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 64, 88; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 82, 113; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 3, 99, 140; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 8, 115, 168; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 13, 125, 186; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 24, 142, 220; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 38, 159, 244; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 63, 177, 255; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 107, 199, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 152, 219, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 195, 236, 252; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 230, 248, 253; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 255, 255, 255; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 30, 0, 93; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 0, 110; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 47, 0, 140; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 62, 12, 174; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 79, 30, 209; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 95, 52, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 109, 75, 248; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 116, 91, 252; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 128, 119, 254; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 139, 141, 254; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 153, 161, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 176, 186, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 199, 208, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 223, 228, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 243, 244, 255; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 255, 255, 255; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 41, 0, 79; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 50, 0, 96; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 64, 0, 122; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 83, 0, 159; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 107, 6, 195; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 130, 34, 215; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 148, 62, 224; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 157, 78, 228; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 173, 105, 233; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 186, 127, 237; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 197, 149, 240; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 212, 176, 244; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 225, 201, 247; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 238, 224, 250; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 248, 243, 253; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 255, 255, 255; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 50, 0, 61; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 61, 0, 74; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 79, 0, 95; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 102, 9, 120; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 127, 23, 146; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 151, 38, 170; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 173, 51, 192; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 186, 60, 206; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 213, 73, 235; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 232, 91, 253; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 240, 122, 255; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 245, 159, 255; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 248, 191, 255; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 251, 219, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 253, 241, 255; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 255, 255, 255; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 59, 0, 22; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 74, 0, 27; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 93, 0, 34; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 123, 0, 45; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 152, 7, 60; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 181, 19, 76; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 207, 31, 92; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 224, 38, 101; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 51, 119; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 96, 149; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 128, 171; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 163, 194; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 193, 214; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 220, 232; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 255, 241, 246; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 255, 255, 255; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 58, 0, 37; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 71, 0, 44; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 90, 0, 57; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 115, 7, 75; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 143, 18, 97; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 171, 29, 119; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 196, 39, 138; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 213, 45, 151; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 236, 67, 175; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 251, 90, 196; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 255, 122, 210; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 255, 159, 223; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 255, 191, 234; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 255, 219, 243; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 255, 241, 250; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 255, 255, 255; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 0, 30, 33; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 0, 37, 41; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 0, 49, 54; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 0, 66, 72; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 3, 84, 92; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 5, 103, 112; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 7, 120, 131; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 9, 131, 142; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 11, 151, 164; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 13, 168, 182; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 16, 186, 202; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 64, 208, 220; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 128, 225, 231; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 183, 240, 240; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 228, 249, 249; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 255, 255, 255; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 35, 24, 8; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 44, 31, 11; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 58, 40, 14; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 78, 55, 19; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 98, 71, 30; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 115, 88, 47; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 132, 104, 61; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 143, 114, 69; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 163, 132, 84; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 181, 147, 98; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 199, 163, 112; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 222, 185, 130; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 232, 207, 169; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 242, 227, 206; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 250, 244, 236; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 255, 255, 255; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 26, 26, 26; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 33, 33, 33; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 44, 44, 44; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 59, 59, 59; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 76, 76, 76; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 92, 92, 92; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 108, 108, 108; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 118, 118, 118; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 137, 137, 137; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 152, 152, 152; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 169, 169, 169; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 190, 190, 190; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 211, 211, 211; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 229, 229, 229; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 244, 244, 244; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 255, 255, 255; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 48, 17, 4; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 59, 21, 5; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 79, 28, 7; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 100, 41, 15; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 122, 57, 28; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 143, 74, 40; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 163, 88, 52; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 176, 98, 59; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 192, 119, 80; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 206, 136, 99; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 220, 154, 118; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 232, 179, 149; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 239, 203, 183; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 246, 225, 214; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 252, 244, 239; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 255, 255, 255; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-300 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-300 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-300 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-300 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-300 - ); - --color-scheme: dark; - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-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-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-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-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-swatch-border-color-rgb: 255, 255, 255; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 255, 255, 255; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); -} - -:host, -:root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); - --spectrum-static-black-text-color: var(--spectrum-black); - --spectrum-static-white-text-color: var(--spectrum-white); - --spectrum-track-color: var(--spectrum-gray-300); - --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); - --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-0: 0px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 10px; - --spectrum-corner-radius-300: 6px; - --spectrum-corner-radius-400: 7px; - --spectrum-corner-radius-500: 8px; - --spectrum-corner-radius-600: 9px; - --spectrum-corner-radius-700: 10px; - --spectrum-corner-radius-800: 16px; - --spectrum-corner-radius-1000: 0.5; - --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); - --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); - --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); - --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); - --spectrum-corner-radius-extra-large-default: var( - --spectrum-corner-radius-800 - ); - --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); - --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); - --spectrum-corner-radius-small-size-medium: var( - --spectrum-corner-radius-100 - ); - --spectrum-corner-radius-small-size-large: var( - --spectrum-corner-radius-200 - ); - --spectrum-corner-radius-small-size-extra-large: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-extra-small: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-small: var( - --spectrum-corner-radius-400 - ); - --spectrum-corner-radius-medium-size-medium: var( - --spectrum-corner-radius-500 - ); - --spectrum-corner-radius-medium-size-large: var( - --spectrum-corner-radius-600 - ); - --spectrum-corner-radius-medium-size-extra-large: var( - --spectrum-corner-radius-700 - ); - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: adobe clean; - --spectrum-serif-font-family: adobe clean serif; - --spectrum-cjk-font-family: adobe clean han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: source code pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - - --spectrum-animation-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-linear: cubic-bezier(0, 0, 1, 1); - - --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) - ); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 16px; - --spectrum-workflow-icon-size-75: 18px; - --spectrum-workflow-icon-size-100: 24px; - --spectrum-workflow-icon-size-200: 28px; - --spectrum-workflow-icon-size-300: 30px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 7px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-visual-400: 11px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 15px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 21px; - --spectrum-component-pill-edge-to-visual-300: 28px; - --spectrum-component-pill-edge-to-visual-only-75: 6px; - --spectrum-component-pill-edge-to-visual-only-100: 8px; - --spectrum-component-pill-edge-to-visual-only-200: 11px; - --spectrum-component-pill-edge-to-visual-only-300: 15px; - --spectrum-component-pill-edge-to-text-75: 17px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 24px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 9px; - --spectrum-component-edge-to-visual-75: 11px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 15px; - --spectrum-component-edge-to-visual-300: 20px; - --spectrum-component-edge-to-visual-only-50: 5px; - --spectrum-component-edge-to-visual-only-75: 6px; - --spectrum-component-edge-to-visual-only-100: 8px; - --spectrum-component-edge-to-visual-only-200: 11px; - --spectrum-component-edge-to-visual-only-300: 15px; - --spectrum-component-edge-to-text-50: 11px; - --spectrum-component-edge-to-text-75: 13px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 18px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 5px; - --spectrum-component-top-to-workflow-icon-75: 6px; - --spectrum-component-top-to-workflow-icon-100: 8px; - --spectrum-component-top-to-workflow-icon-200: 11px; - --spectrum-component-top-to-workflow-icon-300: 15px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --scale: large; - - --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-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-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-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-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-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-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-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-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-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --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-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; - - --spectrum-well-border-radius: 5px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-padding: 20px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; -} - -:host, -:root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-800); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.12; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.16; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.2; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-100 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-200 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-200 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-200 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-200 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-200 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-200 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-200 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-200 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-200 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-200 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-200 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-200 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 255, 255, 255; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 248, 248, 248; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 243, 243, 243; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 233, 233, 233; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 225, 225, 225; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 218, 218, 218; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 198, 198, 198; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 143, 143, 143; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 113, 113, 113; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 80, 80, 80; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 41, 41, 41; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 19, 19, 19; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 0, 0, 0; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 245, 249, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 229, 240, 254; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 203, 226, 254; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 172, 207, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 142, 185, 252; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 114, 158, 253; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 93, 137, 255; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 75, 117, 255; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 59, 99, 251; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 39, 77, 234; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 29, 62, 207; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 21, 50, 173; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 16, 40, 140; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 12, 31, 105; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 14, 24, 67; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 7, 11, 30; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 255, 246, 245; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 235, 232; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 214, 209; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 188, 180; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 157, 145; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 118, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 255, 81, 61; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 240, 56, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 215, 50, 32; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 183, 40, 24; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 156, 33, 19; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 129, 27, 14; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 104, 21, 10; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 80, 16, 6; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 59, 11, 4; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 29, 5, 2; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 255, 246, 231; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 236, 207; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 255, 218, 158; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 193, 94; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 162, 19; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 252, 125, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 232, 106, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 212, 91, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 194, 78, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 167, 62, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 144, 51, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 118, 41, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 95, 32, 0; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 73, 24, 0; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 52, 18, 0; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 25, 8, 0; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 255, 248, 204; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 255, 241, 151; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 255, 222, 44; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 245, 199, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 230, 175, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 210, 149, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 193, 131, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 175, 116, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 158, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 134, 85, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 114, 72, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 93, 59, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 75, 47, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 56, 35, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 40, 25, 0; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 18, 11, 0; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 246, 251, 222; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 234, 246, 173; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 208, 236, 70; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 182, 219, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 163, 196, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 143, 172, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 128, 153, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 114, 137, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 102, 122, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 86, 103, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 73, 87, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 60, 71, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 47, 57, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 35, 43, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 25, 30, 0; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 11, 14, 0; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 235, 255, 220; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 197, 255, 156; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 157, 247, 92; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 129, 228, 58; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 110, 206, 42; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 93, 180, 31; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 82, 161, 25; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 72, 144, 20; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 64, 129, 17; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 52, 109, 12; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 44, 92, 9; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 35, 75, 6; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 27, 60, 3; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 19, 46, 0; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 12, 33, 0; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 4, 15, 0; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 237, 252, 241; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 215, 247, 225; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 173, 238, 197; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 107, 227, 162; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 43, 209, 125; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 18, 184, 103; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 11, 164, 93; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 7, 147, 85; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 5, 131, 78; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 3, 110, 69; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 2, 93, 60; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 1, 76, 52; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 0, 61, 44; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 0, 46, 34; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 0, 33, 25; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 0, 15, 12; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 235, 251, 246; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 211, 246, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 169, 237, 216; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 92, 225, 194; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 16, 207, 169; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 13, 181, 149; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 11, 162, 134; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 9, 144, 120; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 7, 129, 109; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 5, 108, 92; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 3, 92, 80; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 1, 75, 67; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 0, 60, 54; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 0, 46, 40; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 0, 33, 29; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 0, 15, 14; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 238, 250, 254; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 217, 244, 253; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 183, 231, 252; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 138, 213, 255; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 92, 192, 255; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 48, 167, 254; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 29, 149, 231; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 18, 134, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 11, 120, 179; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 4, 102, 145; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 87, 121; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 71, 98; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 57, 78; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 43, 59; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 0, 31, 43; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 0, 14, 20; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 247, 248, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 235, 238, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 216, 222, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 192, 201, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 167, 178, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 145, 151, 254; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 132, 128, 254; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 122, 106, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 113, 85, 250; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 99, 56, 238; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 84, 36, 219; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 69, 19, 191; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 55, 6, 160; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 42, 0, 129; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 31, 0, 98; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 17, 0, 54; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 251, 247, 254; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 244, 235, 252; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 235, 218, 249; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 221, 193, 246; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 208, 167, 243; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 191, 138, 238; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 178, 114, 235; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 166, 92, 231; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 154, 71, 226; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 134, 40, 217; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 115, 13, 204; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 93, 0, 177; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 75, 0, 144; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 59, 0, 111; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 44, 0, 84; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 23, 0, 45; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 254, 246, 255; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 253, 233, 255; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 250, 211, 255; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 247, 181, 255; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 243, 147, 255; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 236, 105, 255; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 77, 245; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 200, 68, 220; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 181, 57, 200; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 156, 40, 175; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 135, 27, 154; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 113, 15, 131; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 92, 4, 109; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 72, 0, 88; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 54, 0, 66; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 29, 0, 35; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 255, 245, 248; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 232, 240; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 213, 227; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 185, 208; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 152, 187; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 255, 112, 159; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 255, 72, 133; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 240, 45, 110; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 217, 35, 97; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 186, 22, 80; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 163, 5, 62; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 136, 0, 51; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 111, 0, 40; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 86, 0, 30; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 64, 0, 22; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 35, 0, 12; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 255, 246, 252; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 255, 232, 247; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 255, 211, 240; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 255, 181, 230; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 255, 148, 219; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 255, 103, 204; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 242, 76, 184; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 228, 52, 163; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 206, 42, 146; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 176, 31, 123; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 152, 22, 104; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 128, 12, 85; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 105, 3, 68; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 83, 0, 53; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 62, 0, 39; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 33, 0, 21; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 238, 251, 251; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 209, 245, 245; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 169, 236, 237; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 111, 221, 228; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 39, 202, 216; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 15, 177, 192; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 12, 158, 171; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 10, 141, 153; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 8, 126, 137; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 5, 107, 116; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 3, 90, 98; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 1, 74, 81; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 0, 59, 65; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 0, 44, 49; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 0, 32, 35; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 0, 15, 17; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 252, 247, 242; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 247, 238, 225; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 239, 221, 195; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 229, 200, 157; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 214, 177, 123; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 190, 155, 104; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 171, 138, 90; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 154, 123, 77; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 139, 109, 66; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 119, 91, 50; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 103, 76, 35; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 88, 61, 21; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 70, 49, 17; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 52, 37, 13; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 38, 26, 9; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 16, 12, 4; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 247, 247, 247; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 239, 239, 239; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 223, 223, 223; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 204, 204, 204; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 183, 183, 183; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 160, 160, 160; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 143, 143, 143; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 128, 128, 128; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 114, 114, 114; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 96, 96, 96; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 81, 81, 81; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 66, 66, 66; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 52, 52, 52; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 39, 39, 39; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 28, 28, 28; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 12, 12, 12; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 253, 247, 243; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 249, 236, 229; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 244, 218, 203; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 237, 196, 172; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 229, 170, 136; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 212, 145, 108; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 198, 126, 88; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 184, 109, 70; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 170, 94, 56; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 147, 77, 43; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 128, 62, 32; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 110, 48, 21; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 92, 35, 11; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 72, 25, 6; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 52, 18, 4; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 24, 8, 2; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-200 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-200 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-200 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-200 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-200 - ); - --color-scheme: light; - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-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-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-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-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-swatch-border-color-rgb: 0, 0, 0; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 0, 0, 0; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 20px; - --spectrum-workflow-icon-size-200: 22px; - --spectrum-workflow-icon-size-300: 26px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 5px; - --spectrum-text-to-visual-75: 5px; - --spectrum-text-to-visual-100: 6px; - --spectrum-text-to-visual-200: 7px; - --spectrum-text-to-visual-300: 8px; - --spectrum-text-to-visual-400: 9px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 11px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 20px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 6px; - --spectrum-component-pill-edge-to-visual-only-200: 9px; - --spectrum-component-pill-edge-to-visual-only-300: 11px; - --spectrum-component-pill-edge-to-text-75: 13px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 23px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 8px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 14px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 6px; - --spectrum-component-edge-to-visual-only-200: 9px; - --spectrum-component-edge-to-visual-only-300: 11px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 10px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 17px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 6px; - --spectrum-component-top-to-workflow-icon-200: 9px; - --spectrum-component-top-to-workflow-icon-300: 11px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --scale: medium; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - - --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-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-dial-label-gap-y: 5px; - - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-dialog-confirm-title-text-size: 18px; - - --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-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-pagination-item-inline-spacing: 5px; - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-slider-ramp-track-height: 16px; - --spectrum-slider-tick-mark-height: 10px; - - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; - - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; -} diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css index 1cfac6ebcc..5520bbf491 100644 --- a/tools/styles/tokens-v2/large-vars.css +++ b/tools/styles/tokens-v2/large-vars.css @@ -539,17 +539,14 @@ --spectrum-font-size-1200: 62px; --spectrum-font-size-1300: 70px; --scale: large; - --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-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -557,7 +554,6 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -566,24 +562,18 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --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-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-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -593,7 +583,6 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -601,49 +590,38 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --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-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-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --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-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; - --spectrum-well-border-radius: 5px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; diff --git a/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css index 17d39d96f9..12e756451c 100644 --- a/tools/styles/tokens-v2/light-vars.css +++ b/tools/styles/tokens-v2/light-vars.css @@ -947,7 +947,6 @@ --spectrum-negative-color-200 ); --color-scheme: light; - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); @@ -955,7 +954,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 @@ -965,9 +963,7 @@ 0.1 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-900-rgb), 0.1 @@ -996,37 +992,27 @@ 0.06 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1100 ); --spectrum-logic-button-and-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-steplist-current-marker-color-key-focus: var( --spectrum-blue-800 ); - --spectrum-swatch-border-color-rgb: 0, 0, 0; - --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity) @@ -1037,7 +1023,6 @@ var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity) ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.06 diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css index 7b4d91b5d5..04406e48c7 100644 --- a/tools/styles/tokens-v2/medium-vars.css +++ b/tools/styles/tokens-v2/medium-vars.css @@ -539,17 +539,14 @@ --spectrum-font-size-1200: 50px; --spectrum-font-size-1300: 60px; --scale: medium; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-header-content-font-size: var( @@ -557,7 +554,6 @@ ); --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-bottom-to-text-medium: 8px; --spectrum-button-bottom-to-text-large: 10px; @@ -566,24 +562,18 @@ --spectrum-button-top-to-text-medium: 7px; --spectrum-button-top-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; - --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-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-colorwheel-colorarea-container-size: 144px; --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - --spectrum-datepicker-dash-line-height: 24px; --spectrum-datepicker-datetime-width-first: 36px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); @@ -593,7 +583,6 @@ --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-width-quiet-first: 72px; --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-controls-margin: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -601,14 +590,12 @@ --spectrum-dial-handle-position: 8px; --spectrum-dial-label-container-top-to-text: 4px; --spectrum-dial-label-gap-y: 5px; - --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-padding-grid: 40px; --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; @@ -621,15 +608,11 @@ --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-pagination-item-inline-spacing: 5px; --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; - --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); @@ -638,12 +621,9 @@ --spectrum-spacing-400 ); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; - --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-well-margin-top: var(--spectrum-spacing-75); --spectrum-well-min-width: 240px; diff --git a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css deleted file mode 100644 index 3b5fe4f4c7..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css +++ /dev/null @@ -1,108 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css deleted file mode 100644 index 9b137abd32..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css +++ /dev/null @@ -1,109 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css deleted file mode 100644 index b21332805f..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css +++ /dev/null @@ -1,120 +0,0 @@ -:host, -:root { - /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 5px; - --spectrum-edge-to-visual-only-100: 9px; - --spectrum-edge-to-visual-only-200: 13px; - --spectrum-edge-to-visual-only-300: 16px; - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} diff --git a/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css deleted file mode 100644 index 05529d7727..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css +++ /dev/null @@ -1,108 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-800-rgb - ); /* var(--spectrum-accent-color-800);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); -} diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css deleted file mode 100644 index 487524757b..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css +++ /dev/null @@ -1,121 +0,0 @@ -:host, -:root { - /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 4px; - --spectrum-edge-to-visual-only-100: 7px; - --spectrum-edge-to-visual-only-200: 10px; - --spectrum-edge-to-visual-only-300: 13px; - - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens-v2/spectrum/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css deleted file mode 100644 index 7dfeb222c0..0000000000 --- a/tools/styles/tokens-v2/spectrum/custom-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -:host, -:root { - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - - /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - - /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ - --spectrum-corner-radius-1000: 9999px; -} diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css deleted file mode 100644 index 107c329b07..0000000000 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ /dev/null @@ -1,891 +0,0 @@ -:host, -:root { - --system-accordion-divider-color: var(--spectrum-gray-200); -} - -:host, -:root { - --system-action-bar-popover-background-color: var(--spectrum-gray-25); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); -} - -:host, -:root { - --system-action-button-background-color-default: var(--spectrum-gray-50); - --system-action-button-background-color-hover: var(--spectrum-gray-100); - --system-action-button-background-color-down: var(--spectrum-gray-200); - --system-action-button-background-color-focus: var(--spectrum-gray-100); - --system-action-button-background-color-selected-disabled: var( - --spectrum-transparent-black-100 - ); - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-action-button-content-color-selected: var(--spectrum-gray-50); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-100 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-100 - ); - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-quiet-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-quiet-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-quiet-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-quiet-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-700 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-quiet-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-quiet-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-quiet-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-quiet-background-color-focus: var( - --spectrum-transparent-white-400 - ); -} - -:host, -:root { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; -} - -:host, -:root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); -} - -:host, -:root { - --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-button-background-color-default: var(--spectrum-gray-50); - --system-button-background-color-hover: var(--spectrum-gray-100); - --system-button-background-color-down: var(--spectrum-gray-200); - --system-button-background-color-focus: var(--spectrum-gray-100); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-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-primary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-100 - ); - --system-button-secondary-not-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-secondary-not-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-not-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-200 - ); - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-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-outline-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-not-secondary-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-not-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-border-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-not-secondary-border-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-secondary-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-secondary-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-outline-secondary-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-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-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-border-color-default: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-not-secondary-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-button-static-black-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-black-600 - ); -} - -: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-checkmark-color: var(--spectrum-gray-50); - --system-checkbox-control-corner-radius: 2px; -} - -:host, -:root { - --system-card-border-color: var(--spectrum-gray-100); - --system-card-border-color-hover: var(--spectrum-gray-200); - --system-card-divider-color: var(--spectrum-gray-200); - --system-card-preview-background-color: var(--spectrum-gray-100); - --system-card-preview-background-color-hover: var(--spectrum-gray-200); -} - -: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-static-white-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-static-white-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-clear-button-static-white-background-color-key-focus: var( - --spectrum-transparent-white-400 - ); -} - -: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); - --system-close-button-background-color-focus: var(--spectrum-gray-100); - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-400 - ); -} - -:host, -:root { - --system-color-wheel-border-color: var(--spectrum-transparent-black-300); -} - -: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-800); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-900); - --system-combobox-border-color-key-focus: var(--spectrum-gray-800); - --system-combobox-background-color-disabled: var(--spectrum-gray-25); -} - -: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); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-900 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-900 - ); -} - -:host, -:root { - --system-drop-zone-border-color: var(--spectrum-gray-200); -} - -: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-50); - --system-infield-button-background-color-hover: var(--spectrum-gray-100); - --system-infield-button-background-color-down: var(--spectrum-gray-200); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-100 - ); -} - -:host, -:root { - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); -} - -:host, -:root { - --system-modal-background-color: var(--spectrum-background-layer-2-color); -} - -:host, -:root { - --system-picker-background-color-default: var(--spectrum-gray-100); - --system-picker-background-color-default-open: var(--spectrum-gray-100); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-800); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-900); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-900); - --system-picker-border-color-disabled: var(--spectrum-gray-300); - --system-picker-border-width: var(--spectrum-border-width-100); -} - -: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); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-popover-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-progress-bar-track-color: var(--spectrum-gray-200); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-400 - ); -} - -:host, -:root { - --system-progress-circle-track-border-color: var(--spectrum-gray-200); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-400 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-1000 - ); -} - -: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-button-background-color: var(--spectrum-gray-50); -} - -: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-background-color: var(--spectrum-gray-25); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-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-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-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); -} - -:host, -:root { - --system-side-nav-background-hover: var(--spectrum-gray-100); - --system-side-nav-item-background-down: var(--spectrum-gray-200); - --system-side-nav-background-key-focus: var(--spectrum-gray-100); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-100 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-200); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); -} - -: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); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-track-corner-radius: 2px; - --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); -} - -:host, -:root { - --system-split-view-background-color: var(--spectrum-gray-75); - --system-split-view-handle-background-color: var(--spectrum-gray-200); - --system-split-view-gripper-border-radius: 2px; -} - -:host, -:root { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-default: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-25); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --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-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - --system-stepper-quiet-buttons-border-style: none; - --system-stepper-quiet-button-edge-to-fill: 0; -} - -:host, -:root { - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --system-swatch-disabled-icon-color: var(--spectrum-gray-25); -} - -: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-background-color: var(--spectrum-gray-200); - --system-switch-background-color-disabled: var(--spectrum-gray-200); - --system-switch-handle-background-color: var(--spectrum-gray-50); -} - -:host, -:root { - --system-table-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-border-color: var(--spectrum-gray-200); - --system-table-divider-color: var(--spectrum-gray-200); - --system-table-row-background-color: var(--spectrum-gray-25); - --system-table-summary-row-background-color: var(--spectrum-gray-100); - --system-table-section-header-background-color: var(--spectrum-gray-100); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-25 - ); -} - -:host, -:root { - --system-tabs-font-weight: var(--spectrum-regular-font-weight); - --system-tabs-divider-background-color: var(--spectrum-gray-200); -} - -:host, -:root { - --system-tag-background-color: var(--spectrum-gray-50); - --system-tag-background-color-hover: var(--spectrum-gray-50); - --system-tag-background-color-active: var(--spectrum-gray-100); - --system-tag-background-color-focus: var(--spectrum-gray-50); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --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-content-color-selected: var(--spectrum-gray-25); - --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 - ); -} - -: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-background-color: var(--spectrum-gray-25); -} - -:host, -:root { - --system-thumbnail-border-radius: 2px; -} - -:host, -:root { - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-toast-divider-color: var(--spectrum-transparent-white-400); -} - -:host, -:root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); -} diff --git a/tools/styles/tokens/express/component-bridge.css b/tools/styles/tokens/express/component-bridge.css new file mode 100644 index 0000000000..4ac9133a38 --- /dev/null +++ b/tools/styles/tokens/express/component-bridge.css @@ -0,0 +1,3404 @@ +:host, +:root { + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-selected: var(--spectrum-gray-75); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-300 + ); + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-400 + ); + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-300 + ); + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-quiet-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-quiet-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-quiet-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-quiet-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-quiet-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-quiet-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-quiet-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-quiet-background-color-focus: var( + --spectrum-transparent-white-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-alert-banner-neutral-background: var( + --spectrum-neutral-background-color-default + ); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-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-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-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --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-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-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-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-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-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-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --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-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-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-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-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-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-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-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-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-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-border-color: var(--spectrum-gray-300); + --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-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-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-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-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-color-disabled: transparent; + --system-picker-border-width: 0px; + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-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-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-toast-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var( + --spectrum-heading-cjk-size-xxs + ); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxl + ); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tools/styles/tokens/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css deleted file mode 100644 index f43989ec31..0000000000 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ /dev/null @@ -1,13 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css deleted file mode 100644 index f43989ec31..0000000000 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ /dev/null @@ -1,13 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index b5e1ea6d01..4803b7e009 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -2,10 +2,7 @@ :root { --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css deleted file mode 100644 index f6a897274d..0000000000 --- a/tools/styles/tokens/express/custom-light-vars.css +++ /dev/null @@ -1,15 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); -} diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 031b3e02a4..007e27b4dc 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -2,10 +2,7 @@ :root { --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/express/dark-vars.css b/tools/styles/tokens/express/dark-vars.css index 667dfefee0..f43989ec31 100644 --- a/tools/styles/tokens/express/dark-vars.css +++ b/tools/styles/tokens/express/dark-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-700 diff --git a/tools/styles/tokens/express/darkest-vars.css b/tools/styles/tokens/express/darkest-vars.css index 667dfefee0..f43989ec31 100644 --- a/tools/styles/tokens/express/darkest-vars.css +++ b/tools/styles/tokens/express/darkest-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-700 diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index edcc99c9ff..1b0a635be4 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -51,906 +51,3 @@ ); --system: express; } - -:host, -:root { - --system-accordion-divider-color: var(--spectrum-gray-300); -} - -:host, -:root { - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); -} - -:host, -:root { - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-background-color-selected-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-border-color-disabled: transparent; - --system-action-button-content-color-selected: var(--spectrum-gray-75); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-400 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-300 - ); - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-quiet-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-quiet-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-quiet-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-quiet-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-quiet-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-quiet-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-quiet-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-quiet-background-color-focus: var( - --spectrum-transparent-white-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) - ); -} - -:host, -:root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-background-color-default - ); -} - -:host, -:root { - --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-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-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-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-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-not-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-not-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-not-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --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-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-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-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-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-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-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-not-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-not-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-not-secondary-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --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-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-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-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-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-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-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-not-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-not-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-not-secondary-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); -} - -: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-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); -} - -: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-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-static-white-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); -} - -: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-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-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 - ); -} - -:host, -:root { - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); -} - -: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-background-color-disabled: var( - --spectrum-disabled-background-color - ); -} - -: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-border-color: var(--spectrum-gray-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 - ); -} - -:host, -:root { - --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) - ); -} - -:host, -:root { - --system-modal-background-color: var(--spectrum-gray-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-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-color-disabled: transparent; - --system-picker-border-width: 0px; -} - -: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; -} - -:host, -:root { - --system-popover-border-width: 0; -} - -:host, -:root { - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); -} - -:host, -:root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --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 - ); -} - -: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-button-background-color: var(--spectrum-gray-75); -} - -: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-background-color: var(--spectrum-gray-50); - --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-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-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-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 - ); -} - -:host, -:root { - --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); -} - -: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-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); -} - -:host, -:root { - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-border-color-default: var(--spectrum-gray-400); - --system-stepper-border-color-hover: var(--spectrum-gray-500); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-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-border-width: 0; - --system-stepper-border-color-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-button-border-width-disabled: 0; - --system-stepper-buttons-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-stepper-quiet-buttons-border-style: none; - --system-stepper-quiet-button-edge-to-fill: 0; -} - -:host, -:root { - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); -} - -: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-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-handle-background-color: var(--spectrum-gray-75); -} - -:host, -:root { - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --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-divider-background-color: var(--spectrum-gray-300); -} - -:host, -:root { - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); - --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var( - --spectrum-component-height-100 - ); - --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); - --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --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-content-color-selected: var(--spectrum-gray-50); - --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 - ); -} - -: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-background-color: var(--spectrum-gray-50); -} - -:host, -:root { - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-toast-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} - -:host, -:root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-background-color-default - ); -} diff --git a/tools/styles/tokens/express/index.css b/tools/styles/tokens/express/index.css deleted file mode 100644 index dc65cea659..0000000000 --- a/tools/styles/tokens/express/index.css +++ /dev/null @@ -1,225 +0,0 @@ -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} - -:host, -:root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-slider-track-thickness: 4px; - --spectrum-slider-handle-gap: 0px; - --spectrum-picker-border-width: 0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; - --spectrum-in-field-button-edge-to-fill: 4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; - --spectrum-border-width-100: 2px; - --spectrum-accent-color-100: var(--spectrum-indigo-100); - --spectrum-accent-color-200: var(--spectrum-indigo-200); - --spectrum-accent-color-300: var(--spectrum-indigo-300); - --spectrum-accent-color-400: var(--spectrum-indigo-400); - --spectrum-accent-color-500: var(--spectrum-indigo-500); - --spectrum-accent-color-600: var(--spectrum-indigo-600); - --spectrum-accent-color-700: var(--spectrum-indigo-700); - --spectrum-accent-color-800: var(--spectrum-indigo-800); - --spectrum-accent-color-900: var(--spectrum-indigo-900); - --spectrum-accent-color-1000: var(--spectrum-indigo-1000); - --spectrum-accent-color-1100: var(--spectrum-indigo-1100); - --spectrum-accent-color-1200: var(--spectrum-indigo-1200); - --spectrum-accent-color-1300: var(--spectrum-indigo-1300); - --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --system: express; -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 18px; - --spectrum-checkbox-control-size-medium: 20px; - --spectrum-checkbox-control-size-large: 22px; - --spectrum-checkbox-control-size-extra-large: 26px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 10px; - --spectrum-checkbox-top-to-control-large: 14px; - --spectrum-checkbox-top-to-control-extra-large: 17px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 10px; - --spectrum-switch-top-to-control-large: 14px; - --spectrum-switch-top-to-control-extra-large: 17px; - --spectrum-radio-button-control-size-small: 18px; - --spectrum-radio-button-control-size-medium: 20px; - --spectrum-radio-button-control-size-large: 22px; - --spectrum-radio-button-control-size-extra-large: 26px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 10px; - --spectrum-radio-button-top-to-control-large: 14px; - --spectrum-radio-button-top-to-control-extra-large: 17px; - --spectrum-slider-control-height-small: 22px; - --spectrum-slider-control-height-medium: 24px; - --spectrum-slider-control-height-large: 28px; - --spectrum-slider-control-height-extra-large: 30px; - --spectrum-slider-handle-size-small: 22px; - --spectrum-slider-handle-size-medium: 24px; - --spectrum-slider-handle-size-large: 28px; - --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 4px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 12px; - --spectrum-slider-bottom-to-handle-extra-large: 15px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 16px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - - --spectrum-dialog-confirm-border-radius: 8px; - - --spectrum-dial-border-radius: 15px; - - --spectrum-assetcard-focus-ring-border-radius: 12px; -} - -:host, -:root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 14px; - --spectrum-checkbox-control-size-medium: 16px; - --spectrum-checkbox-control-size-large: 18px; - --spectrum-checkbox-control-size-extra-large: 20px; - --spectrum-checkbox-top-to-control-small: 5px; - --spectrum-checkbox-top-to-control-medium: 8px; - --spectrum-checkbox-top-to-control-large: 11px; - --spectrum-checkbox-top-to-control-extra-large: 14px; - --spectrum-switch-control-width-small: 25px; - --spectrum-switch-control-width-medium: 28px; - --spectrum-switch-control-width-large: 32px; - --spectrum-switch-control-width-extra-large: 35px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 5px; - --spectrum-switch-top-to-control-medium: 8px; - --spectrum-switch-top-to-control-large: 11px; - --spectrum-switch-top-to-control-extra-large: 14px; - --spectrum-radio-button-control-size-small: 14px; - --spectrum-radio-button-control-size-medium: 16px; - --spectrum-radio-button-control-size-large: 18px; - --spectrum-radio-button-control-size-extra-large: 20px; - --spectrum-radio-button-top-to-control-small: 5px; - --spectrum-radio-button-top-to-control-medium: 8px; - --spectrum-radio-button-top-to-control-large: 11px; - --spectrum-radio-button-top-to-control-extra-large: 14px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 24px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 3px; - --spectrum-slider-bottom-to-handle-medium: 6px; - --spectrum-slider-bottom-to-handle-large: 9px; - --spectrum-slider-bottom-to-handle-extra-large: 12px; - --spectrum-corner-radius-75: 3px; - --spectrum-corner-radius-100: 6px; - --spectrum-corner-radius-200: 12px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - - --spectrum-dialog-confirm-border-radius: 6px; - - --spectrum-dial-border-radius: 12px; - - --spectrum-assetcard-focus-ring-border-radius: 10px; -} diff --git a/tools/styles/tokens/express/large-vars.css b/tools/styles/tokens/express/large-vars.css index 2b61a137b6..b4d2995283 100644 --- a/tools/styles/tokens/express/large-vars.css +++ b/tools/styles/tokens/express/large-vars.css @@ -60,10 +60,7 @@ --spectrum-drop-shadow-blur: 16px; --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/light-vars.css b/tools/styles/tokens/express/light-vars.css index 04b10578e0..f6a897274d 100644 --- a/tools/styles/tokens/express/light-vars.css +++ b/tools/styles/tokens/express/light-vars.css @@ -2,7 +2,6 @@ :root { --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); --spectrum-assetcard-border-color-selected-hover: var( --spectrum-indigo-900 diff --git a/tools/styles/tokens/express/medium-vars.css b/tools/styles/tokens/express/medium-vars.css index c2677d2479..81958a44c1 100644 --- a/tools/styles/tokens/express/medium-vars.css +++ b/tools/styles/tokens/express/medium-vars.css @@ -60,10 +60,7 @@ --spectrum-drop-shadow-blur: 16px; --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/global-vars.css b/tools/styles/tokens/global-vars.css index 4fe2d66fd4..19959432df 100644 --- a/tools/styles/tokens/global-vars.css +++ b/tools/styles/tokens/global-vars.css @@ -719,7 +719,7 @@ --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); --spectrum-heading-line-height: var(--spectrum-line-height-100); --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-top-multiplier: 0.888889; --spectrum-heading-margin-bottom-multiplier: 0.25; --spectrum-heading-color: var(--spectrum-gray-900); --spectrum-body-sans-serif-font-family: var( @@ -925,7 +925,7 @@ --spectrum-detail-size-s: var(--spectrum-font-size-50); --spectrum-detail-line-height: var(--spectrum-line-height-100); --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-top-multiplier: 0.888889; --spectrum-detail-margin-bottom-multiplier: 0.25; --spectrum-detail-letter-spacing: 0.06em; --spectrum-detail-sans-serif-text-transform: uppercase; diff --git a/tools/styles/tokens/index.css b/tools/styles/tokens/index.css deleted file mode 100644 index 9d84aeac9e..0000000000 --- a/tools/styles/tokens/index.css +++ /dev/null @@ -1,3360 +0,0 @@ -:host, -:root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-700 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-600 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-600 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-600 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-600 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-700); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-700); - --spectrum-pink-background-color-default: var(--spectrum-pink-700); - --spectrum-silver-background-color-default: var(--spectrum-silver-700); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-700 - ); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.36); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.48); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-25: rgb(17, 17, 17); - --spectrum-gray-50: rgb(27, 27, 27); - --spectrum-gray-75: rgb(34, 34, 34); - --spectrum-gray-100: rgb(44, 44, 44); - --spectrum-gray-200: rgb(50, 50, 50); - --spectrum-gray-300: rgb(57, 57, 57); - --spectrum-gray-400: rgb(68, 68, 68); - --spectrum-gray-500: rgb(109, 109, 109); - --spectrum-gray-600: rgb(138, 138, 138); - --spectrum-gray-700: rgb(175, 175, 175); - --spectrum-gray-800: rgb(219, 219, 219); - --spectrum-gray-900: rgb(242, 242, 242); - --spectrum-gray-1000: rgb(255, 255, 255); - --spectrum-blue-100: rgb(14, 23, 63); - --spectrum-blue-200: rgb(15, 28, 82); - --spectrum-blue-300: rgb(12, 33, 117); - --spectrum-blue-400: rgb(18, 45, 154); - --spectrum-blue-500: rgb(26, 58, 195); - --spectrum-blue-600: rgb(37, 73, 229); - --spectrum-blue-700: rgb(52, 91, 248); - --spectrum-blue-800: rgb(69, 110, 254); - --spectrum-blue-900: rgb(86, 129, 255); - --spectrum-blue-1000: rgb(105, 149, 254); - --spectrum-blue-1100: rgb(124, 169, 252); - --spectrum-blue-1200: rgb(152, 192, 252); - --spectrum-blue-1300: rgb(181, 213, 253); - --spectrum-blue-1400: rgb(213, 231, 254); - --spectrum-blue-1500: rgb(238, 245, 255); - --spectrum-blue-1600: rgb(255, 255, 255); - --spectrum-red-100: rgb(54, 10, 3); - --spectrum-red-200: rgb(68, 13, 5); - --spectrum-red-300: rgb(87, 17, 7); - --spectrum-red-400: rgb(115, 24, 11); - --spectrum-red-500: rgb(147, 31, 17); - --spectrum-red-600: rgb(177, 38, 23); - --spectrum-red-700: rgb(205, 46, 29); - --spectrum-red-800: rgb(230, 54, 35); - --spectrum-red-900: rgb(252, 67, 46); - --spectrum-red-1000: rgb(255, 103, 86); - --spectrum-red-1100: rgb(255, 134, 120); - --spectrum-red-1200: rgb(255, 167, 157); - --spectrum-red-1300: rgb(255, 196, 189); - --spectrum-red-1400: rgb(255, 222, 219); - --spectrum-red-1500: rgb(255, 242, 240); - --spectrum-red-1600: rgb(255, 255, 255); - --spectrum-orange-100: rgb(49, 16, 0); - --spectrum-orange-200: rgb(61, 21, 0); - --spectrum-orange-300: rgb(80, 27, 0); - --spectrum-orange-400: rgb(106, 36, 0); - --spectrum-orange-500: rgb(135, 47, 0); - --spectrum-orange-600: rgb(162, 59, 0); - --spectrum-orange-700: rgb(185, 73, 0); - --spectrum-orange-800: rgb(205, 86, 0); - --spectrum-orange-900: rgb(224, 100, 0); - --spectrum-orange-1000: rgb(243, 117, 0); - --spectrum-orange-1100: rgb(255, 137, 0); - --spectrum-orange-1200: rgb(255, 173, 45); - --spectrum-orange-1300: rgb(255, 201, 116); - --spectrum-orange-1400: rgb(255, 225, 178); - --spectrum-orange-1500: rgb(255, 243, 225); - --spectrum-orange-1600: rgb(255, 255, 255); - --spectrum-yellow-100: rgb(37, 23, 0); - --spectrum-yellow-200: rgb(47, 29, 0); - --spectrum-yellow-300: rgb(61, 39, 0); - --spectrum-yellow-400: rgb(83, 52, 0); - --spectrum-yellow-500: rgb(107, 67, 0); - --spectrum-yellow-600: rgb(130, 82, 0); - --spectrum-yellow-700: rgb(151, 97, 0); - --spectrum-yellow-800: rgb(169, 110, 0); - --spectrum-yellow-900: rgb(186, 124, 0); - --spectrum-yellow-1000: rgb(203, 141, 0); - --spectrum-yellow-1100: rgb(218, 159, 0); - --spectrum-yellow-1200: rgb(235, 183, 0); - --spectrum-yellow-1300: rgb(249, 206, 0); - --spectrum-yellow-1400: rgb(255, 230, 86); - --spectrum-yellow-1500: rgb(255, 246, 195); - --spectrum-yellow-1600: rgb(255, 255, 255); - --spectrum-chartreuse-100: rgb(23, 28, 0); - --spectrum-chartreuse-200: rgb(30, 36, 0); - --spectrum-chartreuse-300: rgb(39, 47, 0); - --spectrum-chartreuse-400: rgb(53, 63, 0); - --spectrum-chartreuse-500: rgb(68, 82, 0); - --spectrum-chartreuse-600: rgb(83, 100, 0); - --spectrum-chartreuse-700: rgb(97, 116, 0); - --spectrum-chartreuse-800: rgb(109, 131, 0); - --spectrum-chartreuse-900: rgb(122, 147, 0); - --spectrum-chartreuse-1000: rgb(136, 164, 0); - --spectrum-chartreuse-1100: rgb(151, 181, 0); - --spectrum-chartreuse-1200: rgb(169, 203, 0); - --spectrum-chartreuse-1300: rgb(187, 225, 0); - --spectrum-chartreuse-1400: rgb(219, 240, 117); - --spectrum-chartreuse-1500: rgb(242, 249, 206); - --spectrum-chartreuse-1600: rgb(255, 255, 255); - --spectrum-celery-100: rgb(11, 31, 0); - --spectrum-celery-200: rgb(15, 38, 0); - --spectrum-celery-300: rgb(21, 51, 1); - --spectrum-celery-400: rgb(31, 67, 4); - --spectrum-celery-500: rgb(41, 86, 8); - --spectrum-celery-600: rgb(50, 105, 11); - --spectrum-celery-700: rgb(60, 122, 15); - --spectrum-celery-800: rgb(69, 138, 19); - --spectrum-celery-900: rgb(78, 154, 23); - --spectrum-celery-1000: rgb(88, 172, 28); - --spectrum-celery-1100: rgb(100, 190, 35); - --spectrum-celery-1200: rgb(116, 213, 46); - --spectrum-celery-1300: rgb(136, 234, 65); - --spectrum-celery-1400: rgb(170, 251, 112); - --spectrum-celery-1500: rgb(222, 255, 198); - --spectrum-celery-1600: rgb(255, 255, 255); - --spectrum-green-100: rgb(0, 30, 23); - --spectrum-green-200: rgb(0, 38, 29); - --spectrum-green-300: rgb(0, 51, 38); - --spectrum-green-400: rgb(0, 68, 48); - --spectrum-green-500: rgb(2, 87, 58); - --spectrum-green-600: rgb(3, 106, 67); - --spectrum-green-700: rgb(4, 124, 75); - --spectrum-green-800: rgb(6, 140, 82); - --spectrum-green-900: rgb(9, 157, 89); - --spectrum-green-1000: rgb(14, 175, 98); - --spectrum-green-1100: rgb(24, 193, 110); - --spectrum-green-1200: rgb(57, 215, 134); - --spectrum-green-1300: rgb(126, 231, 172); - --spectrum-green-1400: rgb(189, 241, 208); - --spectrum-green-1500: rgb(229, 250, 236); - --spectrum-green-1600: rgb(255, 255, 255); - --spectrum-seafoam-100: rgb(0, 30, 27); - --spectrum-seafoam-200: rgb(0, 39, 35); - --spectrum-seafoam-300: rgb(0, 50, 44); - --spectrum-seafoam-400: rgb(0, 67, 59); - --spectrum-seafoam-500: rgb(2, 86, 75); - --spectrum-seafoam-600: rgb(4, 105, 89); - --spectrum-seafoam-700: rgb(6, 122, 103); - --spectrum-seafoam-800: rgb(8, 138, 116); - --spectrum-seafoam-900: rgb(10, 154, 128); - --spectrum-seafoam-1000: rgb(12, 173, 142); - --spectrum-seafoam-1100: rgb(14, 190, 156); - --spectrum-seafoam-1200: rgb(29, 214, 176); - --spectrum-seafoam-1300: rgb(122, 229, 203); - --spectrum-seafoam-1400: rgb(186, 241, 222); - --spectrum-seafoam-1500: rgb(229, 249, 243); - --spectrum-seafoam-1600: rgb(255, 255, 255); - --spectrum-cyan-100: rgb(0, 29, 39); - --spectrum-cyan-200: rgb(0, 36, 49); - --spectrum-cyan-300: rgb(0, 48, 65); - --spectrum-cyan-400: rgb(0, 64, 88); - --spectrum-cyan-500: rgb(0, 82, 113); - --spectrum-cyan-600: rgb(3, 99, 140); - --spectrum-cyan-700: rgb(8, 115, 168); - --spectrum-cyan-800: rgb(15, 128, 194); - --spectrum-cyan-900: rgb(24, 142, 220); - --spectrum-cyan-1000: rgb(38, 159, 244); - --spectrum-cyan-1100: rgb(63, 177, 255); - --spectrum-cyan-1200: rgb(107, 199, 255); - --spectrum-cyan-1300: rgb(152, 219, 255); - --spectrum-cyan-1400: rgb(195, 236, 252); - --spectrum-cyan-1500: rgb(230, 248, 253); - --spectrum-cyan-1600: rgb(255, 255, 255); - --spectrum-indigo-100: rgb(30, 0, 93); - --spectrum-indigo-200: rgb(35, 0, 110); - --spectrum-indigo-300: rgb(47, 0, 140); - --spectrum-indigo-400: rgb(62, 12, 174); - --spectrum-indigo-500: rgb(79, 30, 209); - --spectrum-indigo-600: rgb(95, 52, 235); - --spectrum-indigo-700: rgb(109, 75, 248); - --spectrum-indigo-800: rgb(119, 97, 252); - --spectrum-indigo-900: rgb(128, 119, 254); - --spectrum-indigo-1000: rgb(139, 141, 254); - --spectrum-indigo-1100: rgb(153, 161, 255); - --spectrum-indigo-1200: rgb(176, 186, 255); - --spectrum-indigo-1300: rgb(199, 208, 255); - --spectrum-indigo-1400: rgb(223, 228, 255); - --spectrum-indigo-1500: rgb(243, 244, 255); - --spectrum-indigo-1600: rgb(255, 255, 255); - --spectrum-purple-100: rgb(41, 0, 79); - --spectrum-purple-200: rgb(50, 0, 96); - --spectrum-purple-300: rgb(64, 0, 122); - --spectrum-purple-400: rgb(83, 0, 159); - --spectrum-purple-500: rgb(107, 6, 195); - --spectrum-purple-600: rgb(130, 34, 215); - --spectrum-purple-700: rgb(148, 62, 224); - --spectrum-purple-800: rgb(161, 84, 229); - --spectrum-purple-900: rgb(173, 105, 233); - --spectrum-purple-1000: rgb(186, 127, 237); - --spectrum-purple-1100: rgb(197, 149, 240); - --spectrum-purple-1200: rgb(212, 176, 244); - --spectrum-purple-1300: rgb(225, 201, 247); - --spectrum-purple-1400: rgb(238, 224, 250); - --spectrum-purple-1500: rgb(248, 243, 253); - --spectrum-purple-1600: rgb(255, 255, 255); - --spectrum-fuchsia-100: rgb(50, 0, 61); - --spectrum-fuchsia-200: rgb(61, 0, 74); - --spectrum-fuchsia-300: rgb(79, 0, 95); - --spectrum-fuchsia-400: rgb(102, 9, 120); - --spectrum-fuchsia-500: rgb(127, 23, 146); - --spectrum-fuchsia-600: rgb(151, 38, 170); - --spectrum-fuchsia-700: rgb(173, 51, 192); - --spectrum-fuchsia-800: rgb(192, 64, 212); - --spectrum-fuchsia-900: rgb(213, 73, 235); - --spectrum-fuchsia-1000: rgb(232, 91, 253); - --spectrum-fuchsia-1100: rgb(240, 122, 255); - --spectrum-fuchsia-1200: rgb(245, 159, 255); - --spectrum-fuchsia-1300: rgb(248, 191, 255); - --spectrum-fuchsia-1400: rgb(251, 219, 255); - --spectrum-fuchsia-1500: rgb(253, 241, 255); - --spectrum-fuchsia-1600: rgb(255, 255, 255); - --spectrum-magenta-100: rgb(59, 0, 22); - --spectrum-magenta-200: rgb(74, 0, 27); - --spectrum-magenta-300: rgb(93, 0, 34); - --spectrum-magenta-400: rgb(123, 0, 45); - --spectrum-magenta-500: rgb(152, 7, 60); - --spectrum-magenta-600: rgb(181, 19, 76); - --spectrum-magenta-700: rgb(207, 31, 92); - --spectrum-magenta-800: rgb(231, 41, 105); - --spectrum-magenta-900: rgb(255, 51, 119); - --spectrum-magenta-1000: rgb(255, 96, 149); - --spectrum-magenta-1100: rgb(255, 128, 171); - --spectrum-magenta-1200: rgb(255, 163, 194); - --spectrum-magenta-1300: rgb(255, 193, 214); - --spectrum-magenta-1400: rgb(255, 220, 232); - --spectrum-magenta-1500: rgb(255, 241, 246); - --spectrum-magenta-1600: rgb(255, 255, 255); - --spectrum-pink-100: rgb(58, 0, 37); - --spectrum-pink-200: rgb(71, 0, 44); - --spectrum-pink-300: rgb(90, 0, 57); - --spectrum-pink-400: rgb(115, 7, 75); - --spectrum-pink-500: rgb(143, 18, 97); - --spectrum-pink-600: rgb(171, 29, 119); - --spectrum-pink-700: rgb(196, 39, 138); - --spectrum-pink-800: rgb(220, 47, 156); - --spectrum-pink-900: rgb(236, 67, 175); - --spectrum-pink-1000: rgb(251, 90, 196); - --spectrum-pink-1100: rgb(255, 122, 210); - --spectrum-pink-1200: rgb(255, 159, 223); - --spectrum-pink-1300: rgb(255, 191, 234); - --spectrum-pink-1400: rgb(255, 219, 243); - --spectrum-pink-1500: rgb(255, 241, 250); - --spectrum-pink-1600: rgb(255, 255, 255); - --spectrum-turquoise-100: rgb(0, 30, 33); - --spectrum-turquoise-200: rgb(0, 37, 41); - --spectrum-turquoise-300: rgb(0, 49, 54); - --spectrum-turquoise-400: rgb(0, 66, 72); - --spectrum-turquoise-500: rgb(3, 84, 92); - --spectrum-turquoise-600: rgb(5, 103, 112); - --spectrum-turquoise-700: rgb(7, 120, 131); - --spectrum-turquoise-800: rgb(9, 135, 147); - --spectrum-turquoise-900: rgb(11, 151, 164); - --spectrum-turquoise-1000: rgb(13, 168, 182); - --spectrum-turquoise-1100: rgb(16, 186, 202); - --spectrum-turquoise-1200: rgb(64, 208, 220); - --spectrum-turquoise-1300: rgb(128, 225, 231); - --spectrum-turquoise-1400: rgb(183, 240, 240); - --spectrum-turquoise-1500: rgb(228, 249, 249); - --spectrum-turquoise-1600: rgb(255, 255, 255); - --spectrum-brown-100: rgb(35, 24, 8); - --spectrum-brown-200: rgb(44, 31, 11); - --spectrum-brown-300: rgb(58, 40, 14); - --spectrum-brown-400: rgb(78, 55, 19); - --spectrum-brown-500: rgb(98, 71, 30); - --spectrum-brown-600: rgb(115, 88, 47); - --spectrum-brown-700: rgb(132, 104, 61); - --spectrum-brown-800: rgb(148, 118, 73); - --spectrum-brown-900: rgb(163, 132, 84); - --spectrum-brown-1000: rgb(181, 147, 98); - --spectrum-brown-1100: rgb(199, 163, 112); - --spectrum-brown-1200: rgb(222, 185, 130); - --spectrum-brown-1300: rgb(232, 207, 169); - --spectrum-brown-1400: rgb(242, 227, 206); - --spectrum-brown-1500: rgb(250, 244, 236); - --spectrum-brown-1600: rgb(255, 255, 255); - --spectrum-silver-100: rgb(26, 26, 26); - --spectrum-silver-200: rgb(33, 33, 33); - --spectrum-silver-300: rgb(44, 44, 44); - --spectrum-silver-400: rgb(59, 59, 59); - --spectrum-silver-500: rgb(76, 76, 76); - --spectrum-silver-600: rgb(92, 92, 92); - --spectrum-silver-700: rgb(108, 108, 108); - --spectrum-silver-800: rgb(123, 123, 123); - --spectrum-silver-900: rgb(137, 137, 137); - --spectrum-silver-1000: rgb(152, 152, 152); - --spectrum-silver-1100: rgb(169, 169, 169); - --spectrum-silver-1200: rgb(190, 190, 190); - --spectrum-silver-1300: rgb(211, 211, 211); - --spectrum-silver-1400: rgb(229, 229, 229); - --spectrum-silver-1500: rgb(244, 244, 244); - --spectrum-silver-1600: rgb(255, 255, 255); - --spectrum-cinnamon-100: rgb(48, 17, 4); - --spectrum-cinnamon-200: rgb(59, 21, 5); - --spectrum-cinnamon-300: rgb(79, 28, 7); - --spectrum-cinnamon-400: rgb(100, 41, 15); - --spectrum-cinnamon-500: rgb(122, 57, 28); - --spectrum-cinnamon-600: rgb(143, 74, 40); - --spectrum-cinnamon-700: rgb(163, 88, 52); - --spectrum-cinnamon-800: rgb(179, 103, 64); - --spectrum-cinnamon-900: rgb(192, 119, 80); - --spectrum-cinnamon-1000: rgb(206, 136, 99); - --spectrum-cinnamon-1100: rgb(220, 154, 118); - --spectrum-cinnamon-1200: rgb(232, 179, 149); - --spectrum-cinnamon-1300: rgb(239, 203, 183); - --spectrum-cinnamon-1400: rgb(246, 225, 214); - --spectrum-cinnamon-1500: rgb(252, 244, 239); - --spectrum-cinnamon-1600: rgb(255, 255, 255); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color: rgba(255, 255, 255, 0.51); -} - -:host, -:root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white: rgb(255, 255, 255); - --spectrum-transparent-white-25: rgba(255, 255, 255, 0); - --spectrum-transparent-white-50: rgba(255, 255, 255, 0.04); - --spectrum-transparent-white-75: rgba(255, 255, 255, 0.07); - --spectrum-transparent-white-100: rgba(255, 255, 255, 0.11); - --spectrum-transparent-white-200: rgba(255, 255, 255, 0.14); - --spectrum-transparent-white-300: rgba(255, 255, 255, 0.17); - --spectrum-transparent-white-400: rgba(255, 255, 255, 0.21); - --spectrum-transparent-white-500: rgba(255, 255, 255, 0.39); - --spectrum-transparent-white-600: rgba(255, 255, 255, 0.51); - --spectrum-transparent-white-700: rgba(255, 255, 255, 0.66); - --spectrum-transparent-white-800: rgba(255, 255, 255, 0.85); - --spectrum-transparent-white-900: rgba(255, 255, 255, 0.94); - --spectrum-transparent-white-1000: rgb(255, 255, 255); - --spectrum-black: rgb(0, 0, 0); - --spectrum-transparent-black-25: rgba(0, 0, 0, 0); - --spectrum-transparent-black-50: rgba(0, 0, 0, 0.03); - --spectrum-transparent-black-75: rgba(0, 0, 0, 0.05); - --spectrum-transparent-black-100: rgba(0, 0, 0, 0.09); - --spectrum-transparent-black-200: rgba(0, 0, 0, 0.12); - --spectrum-transparent-black-300: rgba(0, 0, 0, 0.15); - --spectrum-transparent-black-400: rgba(0, 0, 0, 0.22); - --spectrum-transparent-black-500: rgba(0, 0, 0, 0.44); - --spectrum-transparent-black-600: rgba(0, 0, 0, 0.56); - --spectrum-transparent-black-700: rgba(0, 0, 0, 0.69); - --spectrum-transparent-black-800: rgba(0, 0, 0, 0.84); - --spectrum-transparent-black-900: rgba(0, 0, 0, 0.93); - --spectrum-transparent-black-1000: rgb(0, 0, 0); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-color-200 - ); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color: rgb(15, 121, 125); - --spectrum-docs-static-black-background-color: rgb(181, 209, 211); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} - -:host, -:root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.12); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.16); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-25: rgb(255, 255, 255); - --spectrum-gray-50: rgb(248, 248, 248); - --spectrum-gray-75: rgb(243, 243, 243); - --spectrum-gray-100: rgb(233, 233, 233); - --spectrum-gray-200: rgb(225, 225, 225); - --spectrum-gray-300: rgb(218, 218, 218); - --spectrum-gray-400: rgb(198, 198, 198); - --spectrum-gray-500: rgb(143, 143, 143); - --spectrum-gray-600: rgb(113, 113, 113); - --spectrum-gray-700: rgb(80, 80, 80); - --spectrum-gray-800: rgb(41, 41, 41); - --spectrum-gray-900: rgb(19, 19, 19); - --spectrum-gray-1000: rgb(0, 0, 0); - --spectrum-blue-100: rgb(245, 249, 255); - --spectrum-blue-200: rgb(229, 240, 254); - --spectrum-blue-300: rgb(203, 226, 254); - --spectrum-blue-400: rgb(172, 207, 253); - --spectrum-blue-500: rgb(142, 185, 252); - --spectrum-blue-600: rgb(114, 158, 253); - --spectrum-blue-700: rgb(93, 137, 255); - --spectrum-blue-800: rgb(75, 117, 255); - --spectrum-blue-900: rgb(59, 99, 251); - --spectrum-blue-1000: rgb(39, 77, 234); - --spectrum-blue-1100: rgb(29, 62, 207); - --spectrum-blue-1200: rgb(21, 50, 173); - --spectrum-blue-1300: rgb(16, 40, 140); - --spectrum-blue-1400: rgb(12, 31, 105); - --spectrum-blue-1500: rgb(14, 24, 67); - --spectrum-blue-1600: rgb(7, 11, 30); - --spectrum-red-100: rgb(255, 246, 245); - --spectrum-red-200: rgb(255, 235, 232); - --spectrum-red-300: rgb(255, 214, 209); - --spectrum-red-400: rgb(255, 188, 180); - --spectrum-red-500: rgb(255, 157, 145); - --spectrum-red-600: rgb(255, 118, 101); - --spectrum-red-700: rgb(255, 81, 61); - --spectrum-red-800: rgb(240, 56, 35); - --spectrum-red-900: rgb(215, 50, 32); - --spectrum-red-1000: rgb(183, 40, 24); - --spectrum-red-1100: rgb(156, 33, 19); - --spectrum-red-1200: rgb(129, 27, 14); - --spectrum-red-1300: rgb(104, 21, 10); - --spectrum-red-1400: rgb(80, 16, 6); - --spectrum-red-1500: rgb(59, 11, 4); - --spectrum-red-1600: rgb(29, 5, 2); - --spectrum-orange-100: rgb(255, 246, 231); - --spectrum-orange-200: rgb(255, 236, 207); - --spectrum-orange-300: rgb(255, 218, 158); - --spectrum-orange-400: rgb(255, 193, 94); - --spectrum-orange-500: rgb(255, 162, 19); - --spectrum-orange-600: rgb(252, 125, 0); - --spectrum-orange-700: rgb(232, 106, 0); - --spectrum-orange-800: rgb(212, 91, 0); - --spectrum-orange-900: rgb(194, 78, 0); - --spectrum-orange-1000: rgb(167, 62, 0); - --spectrum-orange-1100: rgb(144, 51, 0); - --spectrum-orange-1200: rgb(118, 41, 0); - --spectrum-orange-1300: rgb(95, 32, 0); - --spectrum-orange-1400: rgb(73, 24, 0); - --spectrum-orange-1500: rgb(52, 18, 0); - --spectrum-orange-1600: rgb(25, 8, 0); - --spectrum-yellow-100: rgb(255, 248, 204); - --spectrum-yellow-200: rgb(255, 241, 151); - --spectrum-yellow-300: rgb(255, 222, 44); - --spectrum-yellow-400: rgb(245, 199, 0); - --spectrum-yellow-500: rgb(230, 175, 0); - --spectrum-yellow-600: rgb(210, 149, 0); - --spectrum-yellow-700: rgb(193, 131, 0); - --spectrum-yellow-800: rgb(175, 116, 0); - --spectrum-yellow-900: rgb(158, 102, 0); - --spectrum-yellow-1000: rgb(134, 85, 0); - --spectrum-yellow-1100: rgb(114, 72, 0); - --spectrum-yellow-1200: rgb(93, 59, 0); - --spectrum-yellow-1300: rgb(75, 47, 0); - --spectrum-yellow-1400: rgb(56, 35, 0); - --spectrum-yellow-1500: rgb(40, 25, 0); - --spectrum-yellow-1600: rgb(18, 11, 0); - --spectrum-chartreuse-100: rgb(246, 251, 222); - --spectrum-chartreuse-200: rgb(234, 246, 173); - --spectrum-chartreuse-300: rgb(208, 236, 70); - --spectrum-chartreuse-400: rgb(182, 219, 0); - --spectrum-chartreuse-500: rgb(163, 196, 0); - --spectrum-chartreuse-600: rgb(143, 172, 0); - --spectrum-chartreuse-700: rgb(128, 153, 0); - --spectrum-chartreuse-800: rgb(114, 137, 0); - --spectrum-chartreuse-900: rgb(102, 122, 0); - --spectrum-chartreuse-1000: rgb(86, 103, 0); - --spectrum-chartreuse-1100: rgb(73, 87, 0); - --spectrum-chartreuse-1200: rgb(60, 71, 0); - --spectrum-chartreuse-1300: rgb(47, 57, 0); - --spectrum-chartreuse-1400: rgb(35, 43, 0); - --spectrum-chartreuse-1500: rgb(25, 30, 0); - --spectrum-chartreuse-1600: rgb(11, 14, 0); - --spectrum-celery-100: rgb(235, 255, 220); - --spectrum-celery-200: rgb(197, 255, 156); - --spectrum-celery-300: rgb(157, 247, 92); - --spectrum-celery-400: rgb(129, 228, 58); - --spectrum-celery-500: rgb(110, 206, 42); - --spectrum-celery-600: rgb(93, 180, 31); - --spectrum-celery-700: rgb(82, 161, 25); - --spectrum-celery-800: rgb(72, 144, 20); - --spectrum-celery-900: rgb(64, 129, 17); - --spectrum-celery-1000: rgb(52, 109, 12); - --spectrum-celery-1100: rgb(44, 92, 9); - --spectrum-celery-1200: rgb(35, 75, 6); - --spectrum-celery-1300: rgb(27, 60, 3); - --spectrum-celery-1400: rgb(19, 46, 0); - --spectrum-celery-1500: rgb(12, 33, 0); - --spectrum-celery-1600: rgb(4, 15, 0); - --spectrum-green-100: rgb(237, 252, 241); - --spectrum-green-200: rgb(215, 247, 225); - --spectrum-green-300: rgb(173, 238, 197); - --spectrum-green-400: rgb(107, 227, 162); - --spectrum-green-500: rgb(43, 209, 125); - --spectrum-green-600: rgb(18, 184, 103); - --spectrum-green-700: rgb(11, 164, 93); - --spectrum-green-800: rgb(7, 147, 85); - --spectrum-green-900: rgb(5, 131, 78); - --spectrum-green-1000: rgb(3, 110, 69); - --spectrum-green-1100: rgb(2, 93, 60); - --spectrum-green-1200: rgb(1, 76, 52); - --spectrum-green-1300: rgb(0, 61, 44); - --spectrum-green-1400: rgb(0, 46, 34); - --spectrum-green-1500: rgb(0, 33, 25); - --spectrum-green-1600: rgb(0, 15, 12); - --spectrum-seafoam-100: rgb(235, 251, 246); - --spectrum-seafoam-200: rgb(211, 246, 234); - --spectrum-seafoam-300: rgb(169, 237, 216); - --spectrum-seafoam-400: rgb(92, 225, 194); - --spectrum-seafoam-500: rgb(16, 207, 169); - --spectrum-seafoam-600: rgb(13, 181, 149); - --spectrum-seafoam-700: rgb(11, 162, 134); - --spectrum-seafoam-800: rgb(9, 144, 120); - --spectrum-seafoam-900: rgb(7, 129, 109); - --spectrum-seafoam-1000: rgb(5, 108, 92); - --spectrum-seafoam-1100: rgb(3, 92, 80); - --spectrum-seafoam-1200: rgb(1, 75, 67); - --spectrum-seafoam-1300: rgb(0, 60, 54); - --spectrum-seafoam-1400: rgb(0, 46, 40); - --spectrum-seafoam-1500: rgb(0, 33, 29); - --spectrum-seafoam-1600: rgb(0, 15, 14); - --spectrum-cyan-100: rgb(238, 250, 254); - --spectrum-cyan-200: rgb(217, 244, 253); - --spectrum-cyan-300: rgb(183, 231, 252); - --spectrum-cyan-400: rgb(138, 213, 255); - --spectrum-cyan-500: rgb(92, 192, 255); - --spectrum-cyan-600: rgb(48, 167, 254); - --spectrum-cyan-700: rgb(29, 149, 231); - --spectrum-cyan-800: rgb(18, 134, 205); - --spectrum-cyan-900: rgb(11, 120, 179); - --spectrum-cyan-1000: rgb(4, 102, 145); - --spectrum-cyan-1100: rgb(0, 87, 121); - --spectrum-cyan-1200: rgb(0, 71, 98); - --spectrum-cyan-1300: rgb(0, 57, 78); - --spectrum-cyan-1400: rgb(0, 43, 59); - --spectrum-cyan-1500: rgb(0, 31, 43); - --spectrum-cyan-1600: rgb(0, 14, 20); - --spectrum-indigo-100: rgb(247, 248, 255); - --spectrum-indigo-200: rgb(235, 238, 255); - --spectrum-indigo-300: rgb(216, 222, 255); - --spectrum-indigo-400: rgb(192, 201, 255); - --spectrum-indigo-500: rgb(167, 178, 255); - --spectrum-indigo-600: rgb(145, 151, 254); - --spectrum-indigo-700: rgb(132, 128, 254); - --spectrum-indigo-800: rgb(122, 106, 253); - --spectrum-indigo-900: rgb(113, 85, 250); - --spectrum-indigo-1000: rgb(99, 56, 238); - --spectrum-indigo-1100: rgb(84, 36, 219); - --spectrum-indigo-1200: rgb(69, 19, 191); - --spectrum-indigo-1300: rgb(55, 6, 160); - --spectrum-indigo-1400: rgb(42, 0, 129); - --spectrum-indigo-1500: rgb(31, 0, 98); - --spectrum-indigo-1600: rgb(17, 0, 54); - --spectrum-purple-100: rgb(251, 247, 254); - --spectrum-purple-200: rgb(244, 235, 252); - --spectrum-purple-300: rgb(235, 218, 249); - --spectrum-purple-400: rgb(221, 193, 246); - --spectrum-purple-500: rgb(208, 167, 243); - --spectrum-purple-600: rgb(191, 138, 238); - --spectrum-purple-700: rgb(178, 114, 235); - --spectrum-purple-800: rgb(166, 92, 231); - --spectrum-purple-900: rgb(154, 71, 226); - --spectrum-purple-1000: rgb(134, 40, 217); - --spectrum-purple-1100: rgb(115, 13, 204); - --spectrum-purple-1200: rgb(93, 0, 177); - --spectrum-purple-1300: rgb(75, 0, 144); - --spectrum-purple-1400: rgb(59, 0, 111); - --spectrum-purple-1500: rgb(44, 0, 84); - --spectrum-purple-1600: rgb(23, 0, 45); - --spectrum-fuchsia-100: rgb(254, 246, 255); - --spectrum-fuchsia-200: rgb(253, 233, 255); - --spectrum-fuchsia-300: rgb(250, 211, 255); - --spectrum-fuchsia-400: rgb(247, 181, 255); - --spectrum-fuchsia-500: rgb(243, 147, 255); - --spectrum-fuchsia-600: rgb(236, 105, 255); - --spectrum-fuchsia-700: rgb(223, 77, 245); - --spectrum-fuchsia-800: rgb(200, 68, 220); - --spectrum-fuchsia-900: rgb(181, 57, 200); - --spectrum-fuchsia-1000: rgb(156, 40, 175); - --spectrum-fuchsia-1100: rgb(135, 27, 154); - --spectrum-fuchsia-1200: rgb(113, 15, 131); - --spectrum-fuchsia-1300: rgb(92, 4, 109); - --spectrum-fuchsia-1400: rgb(72, 0, 88); - --spectrum-fuchsia-1500: rgb(54, 0, 66); - --spectrum-fuchsia-1600: rgb(29, 0, 35); - --spectrum-magenta-100: rgb(255, 245, 248); - --spectrum-magenta-200: rgb(255, 232, 240); - --spectrum-magenta-300: rgb(255, 213, 227); - --spectrum-magenta-400: rgb(255, 185, 208); - --spectrum-magenta-500: rgb(255, 152, 187); - --spectrum-magenta-600: rgb(255, 112, 159); - --spectrum-magenta-700: rgb(255, 72, 133); - --spectrum-magenta-800: rgb(240, 45, 110); - --spectrum-magenta-900: rgb(217, 35, 97); - --spectrum-magenta-1000: rgb(186, 22, 80); - --spectrum-magenta-1100: rgb(163, 5, 62); - --spectrum-magenta-1200: rgb(136, 0, 51); - --spectrum-magenta-1300: rgb(111, 0, 40); - --spectrum-magenta-1400: rgb(86, 0, 30); - --spectrum-magenta-1500: rgb(64, 0, 22); - --spectrum-magenta-1600: rgb(35, 0, 12); - --spectrum-pink-100: rgb(255, 246, 252); - --spectrum-pink-200: rgb(255, 232, 247); - --spectrum-pink-300: rgb(255, 211, 240); - --spectrum-pink-400: rgb(255, 181, 230); - --spectrum-pink-500: rgb(255, 148, 219); - --spectrum-pink-600: rgb(255, 103, 204); - --spectrum-pink-700: rgb(242, 76, 184); - --spectrum-pink-800: rgb(228, 52, 163); - --spectrum-pink-900: rgb(206, 42, 146); - --spectrum-pink-1000: rgb(176, 31, 123); - --spectrum-pink-1100: rgb(152, 22, 104); - --spectrum-pink-1200: rgb(128, 12, 85); - --spectrum-pink-1300: rgb(105, 3, 68); - --spectrum-pink-1400: rgb(83, 0, 53); - --spectrum-pink-1500: rgb(62, 0, 39); - --spectrum-pink-1600: rgb(33, 0, 21); - --spectrum-turquoise-100: rgb(238, 251, 251); - --spectrum-turquoise-200: rgb(209, 245, 245); - --spectrum-turquoise-300: rgb(169, 236, 237); - --spectrum-turquoise-400: rgb(111, 221, 228); - --spectrum-turquoise-500: rgb(39, 202, 216); - --spectrum-turquoise-600: rgb(15, 177, 192); - --spectrum-turquoise-700: rgb(12, 158, 171); - --spectrum-turquoise-800: rgb(10, 141, 153); - --spectrum-turquoise-900: rgb(8, 126, 137); - --spectrum-turquoise-1000: rgb(5, 107, 116); - --spectrum-turquoise-1100: rgb(3, 90, 98); - --spectrum-turquoise-1200: rgb(1, 74, 81); - --spectrum-turquoise-1300: rgb(0, 59, 65); - --spectrum-turquoise-1400: rgb(0, 44, 49); - --spectrum-turquoise-1500: rgb(0, 32, 35); - --spectrum-turquoise-1600: rgb(0, 15, 17); - --spectrum-brown-100: rgb(252, 247, 242); - --spectrum-brown-200: rgb(247, 238, 225); - --spectrum-brown-300: rgb(239, 221, 195); - --spectrum-brown-400: rgb(229, 200, 157); - --spectrum-brown-500: rgb(214, 177, 123); - --spectrum-brown-600: rgb(190, 155, 104); - --spectrum-brown-700: rgb(171, 138, 90); - --spectrum-brown-800: rgb(154, 123, 77); - --spectrum-brown-900: rgb(139, 109, 66); - --spectrum-brown-1000: rgb(119, 91, 50); - --spectrum-brown-1100: rgb(103, 76, 35); - --spectrum-brown-1200: rgb(88, 61, 21); - --spectrum-brown-1300: rgb(70, 49, 17); - --spectrum-brown-1400: rgb(52, 37, 13); - --spectrum-brown-1500: rgb(38, 26, 9); - --spectrum-brown-1600: rgb(16, 12, 4); - --spectrum-silver-100: rgb(247, 247, 247); - --spectrum-silver-200: rgb(239, 239, 239); - --spectrum-silver-300: rgb(223, 223, 223); - --spectrum-silver-400: rgb(204, 204, 204); - --spectrum-silver-500: rgb(183, 183, 183); - --spectrum-silver-600: rgb(160, 160, 160); - --spectrum-silver-700: rgb(143, 143, 143); - --spectrum-silver-800: rgb(128, 128, 128); - --spectrum-silver-900: rgb(114, 114, 114); - --spectrum-silver-1000: rgb(96, 96, 96); - --spectrum-silver-1100: rgb(81, 81, 81); - --spectrum-silver-1200: rgb(66, 66, 66); - --spectrum-silver-1300: rgb(52, 52, 52); - --spectrum-silver-1400: rgb(39, 39, 39); - --spectrum-silver-1500: rgb(28, 28, 28); - --spectrum-silver-1600: rgb(12, 12, 12); - --spectrum-cinnamon-100: rgb(253, 247, 243); - --spectrum-cinnamon-200: rgb(249, 236, 229); - --spectrum-cinnamon-300: rgb(244, 218, 203); - --spectrum-cinnamon-400: rgb(237, 196, 172); - --spectrum-cinnamon-500: rgb(229, 170, 136); - --spectrum-cinnamon-600: rgb(212, 145, 108); - --spectrum-cinnamon-700: rgb(198, 126, 88); - --spectrum-cinnamon-800: rgb(184, 109, 70); - --spectrum-cinnamon-900: rgb(170, 94, 56); - --spectrum-cinnamon-1000: rgb(147, 77, 43); - --spectrum-cinnamon-1100: rgb(128, 62, 32); - --spectrum-cinnamon-1200: rgb(110, 48, 21); - --spectrum-cinnamon-1300: rgb(92, 35, 11); - --spectrum-cinnamon-1400: rgb(72, 25, 6); - --spectrum-cinnamon-1500: rgb(52, 18, 4); - --spectrum-cinnamon-1600: rgb(24, 8, 2); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-swatch-border-color: rgba(0, 0, 0, 0.51); -} - -:host, -:root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens/spectrum/component-bridge.css b/tools/styles/tokens/spectrum/component-bridge.css new file mode 100644 index 0000000000..38f1fac984 --- /dev/null +++ b/tools/styles/tokens/spectrum/component-bridge.css @@ -0,0 +1,3408 @@ +:host, +:root { + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-background-color-selected-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-action-button-content-color-selected: var(--spectrum-gray-75); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --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-background-color-disabled: transparent; + --system-action-button-static-black-background-color-selected-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-quiet-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-quiet-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-quiet-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-quiet-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --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-background-color-disabled: transparent; + --system-action-button-static-white-background-color-selected-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-quiet-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-quiet-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-quiet-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-quiet-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-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-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-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-not-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-not-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-not-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --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-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-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-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-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-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-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-not-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-not-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-not-secondary-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-not-secondary-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --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-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-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-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-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-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-outline-not-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-not-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-not-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-not-secondary-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-not-secondary-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-not-secondary-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-not-secondary-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-static-white-background-color-key-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-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-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-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-border-color: var(--spectrum-gray-300); + --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-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-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-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-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-color-disabled: transparent; + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-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-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-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); + --system-tray-exit-animation-delay: 0s; + --system-tray-entry-animation-delay: 0.16s; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var( + --spectrum-heading-cjk-size-xxs + ); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxl + ); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); +} diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css deleted file mode 100644 index f20b8189ad..0000000000 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ /dev/null @@ -1,92 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css deleted file mode 100644 index 95cf0a5a21..0000000000 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ /dev/null @@ -1,93 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); -} diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b2b6c63ca3..b9cac20403 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -2,30 +2,23 @@ :root { --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; --spectrum-menu-item-checkmark-height-medium: 14px; --spectrum-menu-item-checkmark-height-large: 16px; --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; --spectrum-menu-item-checkmark-width-medium: 14px; --spectrum-menu-item-checkmark-width-large: 16px; --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -34,47 +27,39 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-200 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; --spectrum-coach-indicator-ring-diameter: 20px; --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; --spectrum-treeview-item-indentation-extra-large: 30px; --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; --spectrum-dialog-confirm-hero-height: 160px; --spectrum-dialog-confirm-border-radius: 5px; --spectrum-dialog-confirm-title-text-size: 19px; --spectrum-dialog-confirm-description-text-size: 15px; --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -84,10 +69,8 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -95,7 +78,6 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -103,9 +85,7 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css deleted file mode 100644 index 53b88bd9b6..0000000000 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ /dev/null @@ -1,92 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); -} diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 4da4c86aef..af2f9def43 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -2,30 +2,23 @@ :root { --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-top-to-text-medium: 7px; @@ -34,21 +27,17 @@ --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; @@ -59,7 +48,6 @@ --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; @@ -68,14 +56,12 @@ ); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-dash-line-height: 24px; @@ -85,10 +71,8 @@ --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -96,7 +80,6 @@ --spectrum-dial-controls-margin: 8px; --spectrum-dial-label-gap-y: 5px; --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); @@ -104,9 +87,7 @@ --spectrum-heading-size-xs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; } diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 228b94e430..41e39dc2bb 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -2,37 +2,33 @@ :root { --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-duration-0: 0s; + --spectrum-animation-duration-100: 0.13s; + --spectrum-animation-duration-200: 0.16s; + --spectrum-animation-duration-300: 0.19s; + --spectrum-animation-duration-400: 0.22s; + --spectrum-animation-duration-500: 0.25s; + --spectrum-animation-duration-600: 0.3s; + --spectrum-animation-duration-700: 0.35s; + --spectrum-animation-duration-800: 0.4s; + --spectrum-animation-duration-900: 0.45s; + --spectrum-animation-duration-1000: 0.5s; + --spectrum-animation-duration-2000: 1s; + --spectrum-animation-duration-4000: 2s; + --spectrum-animation-duration-6000: 3s; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css index e7f6691893..f20b8189ad 100644 --- a/tools/styles/tokens/spectrum/dark-vars.css +++ b/tools/styles/tokens/spectrum/dark-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.15 @@ -46,19 +45,14 @@ 0.07 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.07 @@ -67,21 +61,18 @@ var(--spectrum-blue-800-rgb), 0.15 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-900 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); @@ -89,7 +80,6 @@ --spectrum-blue-800 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-800-rgb), 0.25 diff --git a/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css index 22469fd947..95cf0a5a21 100644 --- a/tools/styles/tokens/spectrum/darkest-vars.css +++ b/tools/styles/tokens/spectrum/darkest-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-800-rgb), 0.2 @@ -47,19 +46,14 @@ 0.08 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-700 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.08 @@ -68,21 +62,18 @@ var(--spectrum-blue-800-rgb), 0.2 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1000 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-900 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); @@ -90,7 +81,6 @@ --spectrum-blue-800 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-800-rgb), 0.3 diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index ed06756e24..e43216bff0 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -59,37 +59,33 @@ ); --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-duration-0: 0s; + --spectrum-animation-duration-100: 0.13s; + --spectrum-animation-duration-200: 0.16s; + --spectrum-animation-duration-300: 0.19s; + --spectrum-animation-duration-400: 0.22s; + --spectrum-animation-duration-500: 0.25s; + --spectrum-animation-duration-600: 0.3s; + --spectrum-animation-duration-700: 0.35s; + --spectrum-animation-duration-800: 0.4s; + --spectrum-animation-duration-900: 0.45s; + --spectrum-animation-duration-1000: 0.5s; + --spectrum-animation-duration-2000: 1s; + --spectrum-animation-duration-4000: 2s; + --spectrum-animation-duration-6000: 3s; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); @@ -102,910 +98,3 @@ var(--spectrum-docs-static-black-background-color-rgb) ); } - -:host, -:root { - --system-accordion-divider-color: var(--spectrum-gray-300); -} - -:host, -:root { - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); -} - -:host, -:root { - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-background-color-selected-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-action-button-content-color-selected: var(--spectrum-gray-75); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 - ); - --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-background-color-disabled: transparent; - --system-action-button-static-black-background-color-selected-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-quiet-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-quiet-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-quiet-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-quiet-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --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-background-color-disabled: transparent; - --system-action-button-static-white-background-color-selected-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-quiet-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-quiet-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-quiet-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-quiet-background-color-focus: var( - --spectrum-transparent-white-300 - ); -} - -:host, -:root { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; -} - -:host, -:root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); -} - -:host, -:root { - --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-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-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-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-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-not-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-not-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-not-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --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-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-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-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-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-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-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-not-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-not-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-not-secondary-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-not-secondary-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --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-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-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-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-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-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-outline-not-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-not-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-not-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-not-secondary-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-not-secondary-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-not-secondary-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-not-secondary-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); -} - -: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-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); -} - -: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-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-static-white-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); -} - -: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-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-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 - ); -} - -:host, -:root { - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); -} - -: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-background-color-disabled: var( - --spectrum-disabled-background-color - ); -} - -: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-border-color: var(--spectrum-gray-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 - ); -} - -:host, -:root { - --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) - ); -} - -:host, -:root { - --system-modal-background-color: var(--spectrum-gray-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-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-color-disabled: transparent; - --system-picker-border-width: var(--spectrum-border-width-100); -} - -: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); -} - -:host, -:root { - --system-popover-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); -} - -:host, -:root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --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 - ); -} - -: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-button-background-color: var(--spectrum-gray-75); -} - -: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-background-color: var(--spectrum-gray-50); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-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-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-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); -} - -:host, -:root { - --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); -} - -: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-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); -} - -:host, -:root { - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-default: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --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-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var( - --spectrum-gray-100 - ); - --system-stepper-quiet-buttons-border-style: none; - --system-stepper-quiet-button-edge-to-fill: 0; -} - -:host, -:root { - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); -} - -: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-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-handle-background-color: var(--spectrum-gray-75); -} - -:host, -:root { - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --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-divider-background-color: var(--spectrum-gray-300); -} - -:host, -:root { - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --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-content-color-selected: var(--spectrum-gray-50); - --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 - ); -} - -: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-background-color: var(--spectrum-gray-50); -} - -:host, -:root { - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); -} - -:host, -:root { - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} - -:host, -:root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); -} diff --git a/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css deleted file mode 100644 index 4f49738fc8..0000000000 --- a/tools/styles/tokens/spectrum/index.css +++ /dev/null @@ -1,803 +0,0 @@ -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color-rgb: 255, 255, 255; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 255, 255, 255; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color-rgb: 255, 255, 255; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 255, 255, 255; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-border-width-100: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; - - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} - -:host, -:root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - - --spectrum-well-border-color: var(--spectrum-black); - - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-swatch-border-color-rgb: 0, 0, 0; - - --spectrum-swatch-border-color-opacity: 0.51; - - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); - --spectrum-swatch-border-color-light-rgb: 0, 0, 0; - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); -} - -:host, -:root { - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tools/styles/tokens/spectrum/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index f63d46216e..6a1a3280a2 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -50,30 +50,23 @@ --spectrum-drop-shadow-blur: 6px; --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; --spectrum-menu-item-checkmark-height-medium: 14px; --spectrum-menu-item-checkmark-height-large: 16px; --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; --spectrum-menu-item-checkmark-width-medium: 14px; --spectrum-menu-item-checkmark-width-large: 16px; --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; --spectrum-button-top-to-text-medium: 9px; @@ -82,47 +75,39 @@ --spectrum-button-bottom-to-text-large: 13px; --spectrum-button-top-to-text-extra-large: 16px; --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-200 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; --spectrum-coach-indicator-ring-diameter: 20px; --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; --spectrum-treeview-item-indentation-extra-large: 30px; --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; --spectrum-dialog-confirm-hero-height: 160px; --spectrum-dialog-confirm-border-radius: 5px; --spectrum-dialog-confirm-title-text-size: 19px; --spectrum-dialog-confirm-description-text-size: 15px; --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; --spectrum-datepicker-generic-padding: 15px; --spectrum-datepicker-dash-line-height: 30px; @@ -132,10 +117,8 @@ --spectrum-datepicker-invalid-icon-to-button: 10px; --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; --spectrum-dial-handle-position: 10px; --spectrum-dial-handle-block-margin: 20px; @@ -143,7 +126,6 @@ --spectrum-dial-controls-margin: 10px; --spectrum-dial-label-gap-y: 6px; --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); @@ -151,9 +133,7 @@ --spectrum-heading-size-xxs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css index 423a2abd73..53b88bd9b6 100644 --- a/tools/styles/tokens/spectrum/light-vars.css +++ b/tools/styles/tokens/spectrum/light-vars.css @@ -17,7 +17,6 @@ ); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( var(--spectrum-blue-900-rgb), 0.1 @@ -46,19 +45,14 @@ 0.06 ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-800 ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( var(--spectrum-gray-900-rgb), 0.06 @@ -67,21 +61,18 @@ var(--spectrum-blue-900-rgb), 0.1 ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); --spectrum-logic-button-and-background-color-hover: var( --spectrum-blue-1100 ); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-background-color-hover: var( --spectrum-magenta-1100 ); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); @@ -89,7 +80,6 @@ --spectrum-blue-900 ); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( var(--spectrum-blue-900-rgb), 0.2 diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 2e813d2af1..f6cdc7a3d8 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -50,30 +50,23 @@ --spectrum-drop-shadow-blur: 4px; --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; --spectrum-menu-item-checkmark-height-medium: 10px; --spectrum-menu-item-checkmark-height-large: 12px; --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; --spectrum-menu-item-checkmark-width-medium: 10px; --spectrum-menu-item-checkmark-width-large: 12px; --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; --spectrum-button-bottom-to-text-small: 4px; --spectrum-button-top-to-text-medium: 7px; @@ -82,21 +75,17 @@ --spectrum-button-bottom-to-text-large: 10px; --spectrum-button-top-to-text-extra-large: 13px; --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-text-to-button-vertical: var( --spectrum-spacing-100 ); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; --spectrum-coachmark-buttongroup-mobile-display: none; --spectrum-coachmark-menu-display: inline-flex; @@ -107,7 +96,6 @@ --spectrum-well-border-radius: var(--spectrum-spacing-75); --spectrum-workflow-icon-size-xxl: 32px; --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; @@ -116,14 +104,12 @@ ); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; --spectrum-dialog-confirm-hero-height: 128px; --spectrum-dialog-confirm-border-radius: 4px; --spectrum-dialog-confirm-title-text-size: 18px; --spectrum-dialog-confirm-description-text-size: 14px; --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); --spectrum-datepicker-dash-line-height: 24px; @@ -133,10 +119,8 @@ --spectrum-datepicker-invalid-icon-to-button: 8px; --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; --spectrum-dial-handle-position: 8px; --spectrum-dial-handle-block-margin: 16px; @@ -144,7 +128,6 @@ --spectrum-dial-controls-margin: 8px; --spectrum-dial-label-gap-y: 5px; --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); @@ -152,9 +135,7 @@ --spectrum-heading-size-xs ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; } diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css index 5f408023e1..6b4dd50440 100644 --- a/tools/theme/src/express/theme-core-tokens.css +++ b/tools/theme/src/express/theme-core-tokens.css @@ -14,6 +14,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/express/theme-dark-core-tokens.css b/tools/theme/src/express/theme-dark-core-tokens.css index 4ef41eb3a1..3b699f4261 100644 --- a/tools/theme/src/express/theme-dark-core-tokens.css +++ b/tools/theme/src/express/theme-dark-core-tokens.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); :host, :root { diff --git a/tools/theme/src/express/theme-dark.css b/tools/theme/src/express/theme-dark.css index a45603126a..e8b821e0db 100644 --- a/tools/theme/src/express/theme-dark.css +++ b/tools/theme/src/express/theme-dark.css @@ -12,5 +12,5 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/express/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); diff --git a/tools/theme/src/express/theme-light-core-tokens.css b/tools/theme/src/express/theme-light-core-tokens.css index 2ad62ed5ee..6c06fedf5b 100644 --- a/tools/theme/src/express/theme-light-core-tokens.css +++ b/tools/theme/src/express/theme-light-core-tokens.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); :host, :root { diff --git a/tools/theme/src/express/theme-light.css b/tools/theme/src/express/theme-light.css index 37f6a33225..ae019f41d6 100644 --- a/tools/theme/src/express/theme-light.css +++ b/tools/theme/src/express/theme-light.css @@ -12,5 +12,5 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/express/theme-light.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); diff --git a/tools/theme/src/express/theme.css b/tools/theme/src/express/theme.css index cf80eaa576..371e879fb7 100644 --- a/tools/theme/src/express/theme.css +++ b/tools/theme/src/express/theme.css @@ -15,6 +15,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); @import url('@spectrum-web-components/styles/tokens/express/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/express/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/spectrum-two/scale-large-core-tokens.css b/tools/theme/src/spectrum-two/scale-large-core-tokens.css index 174b11bc1b..3454840842 100755 --- a/tools/theme/src/spectrum-two/scale-large-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-large-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-large-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-large.css b/tools/theme/src/spectrum-two/scale-large.css index db452a8607..4b9a27607a 100644 --- a/tools/theme/src/spectrum-two/scale-large.css +++ b/tools/theme/src/spectrum-two/scale-large.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/scale-large.css'); @import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-large-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css index ca8e0afdef..a9b5350ee8 100755 --- a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-medium-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium.css b/tools/theme/src/spectrum-two/scale-medium.css index 00b5009889..649c6e9dc2 100644 --- a/tools/theme/src/spectrum-two/scale-medium.css +++ b/tools/theme/src/spectrum-two/scale-medium.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/scale-medium.css'); @import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-medium-vars.css'); :root, :host { diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css index 11ef41c6cd..e02faac078 100755 --- a/tools/theme/src/spectrum-two/theme-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-core-tokens.css @@ -11,8 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css index 016fda8492..365faa704e 100755 --- a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-dark-vars.css'); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-dark.css b/tools/theme/src/spectrum-two/theme-dark.css index 5b2ec201ae..4bb15d70d3 100644 --- a/tools/theme/src/spectrum-two/theme-dark.css +++ b/tools/theme/src/spectrum-two/theme-dark.css @@ -12,4 +12,3 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-dark-vars.css'); diff --git a/tools/theme/src/spectrum-two/theme-light-core-tokens.css b/tools/theme/src/spectrum-two/theme-light-core-tokens.css index a20b808f30..f08bd2465d 100755 --- a/tools/theme/src/spectrum-two/theme-light-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-light-core-tokens.css @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-light-vars.css'); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-light.css b/tools/theme/src/spectrum-two/theme-light.css index 3b5ac13b90..74d2cca207 100644 --- a/tools/theme/src/spectrum-two/theme-light.css +++ b/tools/theme/src/spectrum-two/theme-light.css @@ -12,4 +12,3 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/theme-light.css'); @import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-light-vars.css'); diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css index 58d25efc0a..4d532b3af5 100755 --- a/tools/theme/src/spectrum-two/theme.css +++ b/tools/theme/src/spectrum-two/theme.css @@ -12,8 +12,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/spectrum-two/core-global.css'); @import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/theme-core-tokens.css b/tools/theme/src/theme-core-tokens.css index 1c628ea1a4..9bba1433c6 100644 --- a/tools/theme/src/theme-core-tokens.css +++ b/tools/theme/src/theme-core-tokens.css @@ -13,6 +13,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/tools/theme/src/theme-dark-core-tokens.css b/tools/theme/src/theme-dark-core-tokens.css index 870dafc872..992cce5ae8 100644 --- a/tools/theme/src/theme-dark-core-tokens.css +++ b/tools/theme/src/theme-dark-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-dark.css b/tools/theme/src/theme-dark.css index 9194e4728e..b3a60dd71a 100644 --- a/tools/theme/src/theme-dark.css +++ b/tools/theme/src/theme-dark.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-dark.css'); @import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); diff --git a/tools/theme/src/theme-darkest-core-tokens.css b/tools/theme/src/theme-darkest-core-tokens.css index 36f72e30d3..e6b1a4e844 100644 --- a/tools/theme/src/theme-darkest-core-tokens.css +++ b/tools/theme/src/theme-darkest-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-darkest-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-darkest.css b/tools/theme/src/theme-darkest.css index 627777ecdb..70cc7dd60e 100644 --- a/tools/theme/src/theme-darkest.css +++ b/tools/theme/src/theme-darkest.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-darkest.css'); @import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-darkest-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); diff --git a/tools/theme/src/theme-light-core-tokens.css b/tools/theme/src/theme-light-core-tokens.css index 81924a5270..eab7c88dd0 100644 --- a/tools/theme/src/theme-light-core-tokens.css +++ b/tools/theme/src/theme-light-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-light.css b/tools/theme/src/theme-light.css index 528af49dc0..4f5dc7fc2f 100644 --- a/tools/theme/src/theme-light.css +++ b/tools/theme/src/theme-light.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-light.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); diff --git a/tools/theme/src/theme-lightest-core-tokens.css b/tools/theme/src/theme-lightest-core-tokens.css index 81924a5270..eab7c88dd0 100644 --- a/tools/theme/src/theme-lightest-core-tokens.css +++ b/tools/theme/src/theme-lightest-core-tokens.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); :host, :root { diff --git a/tools/theme/src/theme-lightest.css b/tools/theme/src/theme-lightest.css index bd18d697b5..fadba254df 100644 --- a/tools/theme/src/theme-lightest.css +++ b/tools/theme/src/theme-lightest.css @@ -12,4 +12,4 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/theme-lightest.css'); @import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); diff --git a/tools/theme/src/theme.css b/tools/theme/src/theme.css index c58c4f8ae7..a1dc2aefdd 100644 --- a/tools/theme/src/theme.css +++ b/tools/theme/src/theme.css @@ -14,6 +14,7 @@ governing permissions and limitations under the License. @import url('@spectrum-web-components/styles/tokens/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); @import url('@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/tokens/spectrum/component-bridge.css'); @import url('@spectrum-web-components/styles/typography.css'); :host { diff --git a/yarn.lock b/yarn.lock index ca57c4e497..d336366fe6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1437,6 +1437,15 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" +"@babel/types@7.25.6": + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6" + integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw== + dependencies: + "@babel/helper-string-parser" "^7.24.8" + "@babel/helper-validator-identifier" "^7.24.7" + to-fast-properties "^2.0.0" + "@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.4.4": version "7.24.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.5.tgz#7661930afc638a5383eb0c4aee59b74f38db84d7" @@ -3263,7 +3272,7 @@ yaml "^2.1.3" yargs "^17.6.0" -"@netlify/build@29.51.4", "@netlify/build@^29.17.3": +"@netlify/build@29.51.4": version "29.51.4" resolved "https://registry.yarnpkg.com/@netlify/build/-/build-29.51.4.tgz#d486b1ca6fe39481bb01d39efe2d77b28f72ecae" integrity sha512-yuUyhRpzNjcvQe7j1GdK7n3T57eajHYx5SVi5rdml9BhpJzQkARyhA9N3R0bSsS3oq5c/0EgvxtRu5k6M4/lPg== @@ -3327,6 +3336,70 @@ uuid "^9.0.0" yargs "^17.6.0" +"@netlify/build@^29.56.1": + version "29.56.1" + resolved "https://registry.yarnpkg.com/@netlify/build/-/build-29.56.1.tgz#b87723153e698bc2964bf370c8d1dcb20c96d3e3" + integrity sha512-0/4GiVTL69AXeIly6ZXIi5g4qU2Oi9djCUcJO6xCZCDgft6TD90JXlsCQ5P/+oh0CFcNPpsy9DBvY8mm0fSFVw== + dependencies: + "@bugsnag/js" "^7.0.0" + "@netlify/blobs" "^7.4.0" + "@netlify/cache-utils" "^5.1.6" + "@netlify/config" "^20.19.1" + "@netlify/edge-bundler" "12.2.3" + "@netlify/framework-info" "^9.8.13" + "@netlify/functions-utils" "^5.2.93" + "@netlify/git-utils" "^5.1.1" + "@netlify/opentelemetry-utils" "^1.2.1" + "@netlify/plugins-list" "^6.80.0" + "@netlify/run-utils" "^5.1.1" + "@netlify/zip-it-and-ship-it" "9.41.1" + "@sindresorhus/slugify" "^2.0.0" + ansi-escapes "^6.0.0" + chalk "^5.0.0" + clean-stack "^4.0.0" + execa "^6.0.0" + fdir "^6.0.1" + figures "^5.0.0" + filter-obj "^5.0.0" + got "^12.0.0" + hot-shots "10.2.1" + indent-string "^5.0.0" + is-plain-obj "^4.0.0" + js-yaml "^4.0.0" + keep-func-props "^4.0.0" + locate-path "^7.0.0" + log-process-errors "^8.0.0" + map-obj "^5.0.0" + memoize-one "^6.0.0" + minimatch "^9.0.4" + node-fetch "^3.3.2" + os-name "^5.0.0" + p-event "^5.0.0" + p-every "^2.0.0" + p-filter "^3.0.0" + p-locate "^6.0.0" + p-map "^6.0.0" + p-reduce "^3.0.0" + path-exists "^5.0.0" + path-type "^5.0.0" + pkg-dir "^7.0.0" + pretty-ms "^8.0.0" + ps-list "^8.0.0" + read-package-up "^11.0.0" + readdirp "^3.4.0" + resolve "^2.0.0-next.1" + rfdc "^1.3.0" + safe-json-stringify "^1.2.0" + semver "^7.3.8" + string-width "^5.0.0" + strip-ansi "^7.0.0" + supports-color "^9.0.0" + terminal-link "^3.0.0" + ts-node "^10.9.1" + typescript "^5.0.0" + uuid "^9.0.0" + yargs "^17.6.0" + "@netlify/cache-utils@^5.1.5": version "5.1.5" resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.1.5.tgz#848c59003e576fa0b2f9c6ca270eff27af938b25" @@ -3341,6 +3414,20 @@ path-exists "^5.0.0" readdirp "^3.4.0" +"@netlify/cache-utils@^5.1.6": + version "5.1.6" + resolved "https://registry.yarnpkg.com/@netlify/cache-utils/-/cache-utils-5.1.6.tgz#8a9e6126c1e6e984323c5e1478063edcc9069570" + integrity sha512-0K1+5umxENy9H3CC+v5qGQbeTmKv/PBAhOxPKK6GPykOVa7OxT26KGMU7Jozo6pVNeLPJUvCCMw48ycwtQ1fvw== + dependencies: + cpy "^9.0.0" + get-stream "^6.0.0" + globby "^13.0.0" + junk "^4.0.0" + locate-path "^7.0.0" + move-file "^3.0.0" + path-exists "^5.0.0" + readdirp "^3.4.0" + "@netlify/config@20.17.1", "@netlify/config@^20.17.1": version "20.17.1" resolved "https://registry.yarnpkg.com/@netlify/config/-/config-20.17.1.tgz#d229812f77f837308ccade36ca93621d46ac119e" @@ -3371,6 +3458,36 @@ validate-npm-package-name "^4.0.0" yargs "^17.6.0" +"@netlify/config@^20.19.1": + version "20.19.1" + resolved "https://registry.yarnpkg.com/@netlify/config/-/config-20.19.1.tgz#534bf981df0f5da41b6b644d95c8e2211611c560" + integrity sha512-GkN8IwHilIlusFuAW+DFjhtpghnaelNcHUoZwBDcJou8eyhIZYAj6B4STMyGUggIfMobYGM28kEY3gN4uUVq0g== + dependencies: + "@iarna/toml" "^2.2.5" + chalk "^5.0.0" + cron-parser "^4.1.0" + deepmerge "^4.2.2" + dot-prop "^7.0.0" + execa "^6.0.0" + fast-safe-stringify "^2.0.7" + figures "^5.0.0" + filter-obj "^5.0.0" + find-up "^6.0.0" + indent-string "^5.0.0" + is-plain-obj "^4.0.0" + js-yaml "^4.0.0" + map-obj "^5.0.0" + netlify "^13.1.21" + netlify-headers-parser "^7.1.4" + netlify-redirect-parser "^14.3.0" + node-fetch "^3.3.1" + omit.js "^2.0.2" + p-locate "^6.0.0" + path-type "^5.0.0" + tomlify-j0.4 "^3.0.0" + validate-npm-package-name "^4.0.0" + yargs "^17.6.0" + "@netlify/edge-bundler@12.2.2": version "12.2.2" resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.2.2.tgz#0c74a458b883a7d537b34a65bcf403912125f4b3" @@ -3400,6 +3517,35 @@ urlpattern-polyfill "8.0.2" uuid "^9.0.0" +"@netlify/edge-bundler@12.2.3": + version "12.2.3" + resolved "https://registry.yarnpkg.com/@netlify/edge-bundler/-/edge-bundler-12.2.3.tgz#a89ff2467fa134419e30511993c637c04064eb4a" + integrity sha512-o/Od4gvGT2qPSjJ1TSh8KYDJHfzxW4iemA5DiZtXIDgaIvWgvehZKDROp9wJ2FseP2F83y4ZDmt5xFfBSD9IYQ== + dependencies: + "@import-maps/resolve" "^1.0.1" + "@vercel/nft" "^0.27.0" + ajv "^8.11.2" + ajv-errors "^3.0.0" + better-ajv-errors "^1.2.0" + common-path-prefix "^3.0.0" + env-paths "^3.0.0" + esbuild "0.21.2" + execa "^6.0.0" + find-up "^6.3.0" + get-package-name "^2.2.0" + get-port "^6.1.2" + is-path-inside "^4.0.0" + jsonc-parser "^3.2.0" + node-fetch "^3.1.1" + node-stream-zip "^1.15.0" + p-retry "^5.1.1" + p-wait-for "^4.1.0" + path-key "^4.0.0" + semver "^7.3.8" + tmp-promise "^3.0.3" + urlpattern-polyfill "8.0.2" + uuid "^9.0.0" + "@netlify/edge-functions@2.9.0": version "2.9.0" resolved "https://registry.yarnpkg.com/@netlify/edge-functions/-/edge-functions-2.9.0.tgz#082beb2f50f5486965b5d18cd025c24cd153604b" @@ -3430,6 +3576,15 @@ cpy "^9.0.0" path-exists "^5.0.0" +"@netlify/functions-utils@^5.2.93": + version "5.2.93" + resolved "https://registry.yarnpkg.com/@netlify/functions-utils/-/functions-utils-5.2.93.tgz#77566d1419da35431d7d1cfd2676953161aa4c45" + integrity sha512-/b2JtJuB3KNN5AIfiH/tan/uM4i6nLj2QFGUL9oID58cMsd73iouRacKu4ct+gxUU78y+/6fiOeYRXbcthdltA== + dependencies: + "@netlify/zip-it-and-ship-it" "9.41.1" + cpy "^9.0.0" + path-exists "^5.0.0" + "@netlify/git-utils@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@netlify/git-utils/-/git-utils-5.1.1.tgz#36d5a6433a070035099b47d9151638053752cd7b" @@ -3529,6 +3684,11 @@ resolved "https://registry.yarnpkg.com/@netlify/open-api/-/open-api-2.33.1.tgz#cf45e87da00d0c02a20731c05cb5a7fd6e34dc0f" integrity sha512-EP5nVae2sRSg8orieT/PvmykIUkPWr/Qzk2vj1QIUAPeMbR8JM3Aq+W/4fK9m0Yq+1CZ3sWeNy/r6nsxLqnXVg== +"@netlify/open-api@^2.34.0": + version "2.34.0" + resolved "https://registry.yarnpkg.com/@netlify/open-api/-/open-api-2.34.0.tgz#409e8d2d2e1755e0a01b38f3f0c48fe597999758" + integrity sha512-C4v7Od/vnGgZ1P4JK3Fn9uUi9HkTxeUqUtj4OLnGD+rGyaVrl4JY89xMCoVksijDtO8XylYFU59CSTnQNeNw7g== + "@netlify/opentelemetry-utils@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@netlify/opentelemetry-utils/-/opentelemetry-utils-1.2.1.tgz#03862fd2073ee01de75335666c729d910bff0abe" @@ -3554,6 +3714,14 @@ "@netlify/node-cookies" "^0.1.0" urlpattern-polyfill "8.0.2" +"@netlify/serverless-functions-api@^1.31.0": + version "1.31.1" + resolved "https://registry.yarnpkg.com/@netlify/serverless-functions-api/-/serverless-functions-api-1.31.1.tgz#4f7f964c46497111e3b4b058f0f33e4c0bba3c05" + integrity sha512-SkNxzfCwctS5ETnCqJOJfZZ/jB0pTkbWEAsApHoL7HzUQGWoRM6wYf4baJAJVMTfZBQu534SbKuwRs7WDAs43A== + dependencies: + "@netlify/node-cookies" "^0.1.0" + urlpattern-polyfill "8.0.2" + "@netlify/zip-it-and-ship-it@9.37.8": version "9.37.8" resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.37.8.tgz#a825c2fda415eb4eae59353fb37202fe21275cc3" @@ -3594,6 +3762,46 @@ yargs "^17.0.0" zod "^3.23.8" +"@netlify/zip-it-and-ship-it@9.41.1": + version "9.41.1" + resolved "https://registry.yarnpkg.com/@netlify/zip-it-and-ship-it/-/zip-it-and-ship-it-9.41.1.tgz#c7bb95a56fe292639ecf8c0376264c9b9776e582" + integrity sha512-EzXw1+4OJ4mCZUOqVPDQZNM8jf/563utFo1Ph6dYtSR21E1oYlgt6Oib1pyG/bFGufvdtrxw845/1MTCPvXzJA== + dependencies: + "@babel/parser" "^7.22.5" + "@babel/types" "7.25.6" + "@netlify/binary-info" "^1.0.0" + "@netlify/serverless-functions-api" "^1.31.0" + "@vercel/nft" "^0.27.1" + archiver "^7.0.0" + common-path-prefix "^3.0.0" + cp-file "^10.0.0" + es-module-lexer "^1.0.0" + esbuild "0.19.11" + execa "^6.0.0" + fast-glob "^3.3.2" + filter-obj "^5.0.0" + find-up "^6.0.0" + glob "^8.0.3" + is-builtin-module "^3.1.0" + is-path-inside "^4.0.0" + junk "^4.0.0" + locate-path "^7.0.0" + merge-options "^3.0.4" + minimatch "^9.0.0" + normalize-path "^3.0.0" + p-map "^5.0.0" + path-exists "^5.0.0" + precinct "^11.0.0" + require-package-name "^2.0.1" + resolve "^2.0.0-next.1" + semver "^7.3.8" + tmp-promise "^3.0.2" + toml "^3.0.0" + unixify "^1.0.0" + urlpattern-polyfill "8.0.2" + yargs "^17.0.0" + zod "^3.23.8" + "@next/env@14.2.3": version "14.2.3" resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.3.tgz#d6def29d1c763c0afb397343a15a82e7d92353a0" @@ -9759,7 +9967,7 @@ colors-option@^4.4.0: chalk "^5.0.1" is-plain-obj "^4.1.0" -colors@1.4.0: +colors@1.4.0, colors@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA== @@ -14286,6 +14494,13 @@ hot-shots@10.0.0: optionalDependencies: unix-dgram "2.x" +hot-shots@10.2.1: + version "10.2.1" + resolved "https://registry.yarnpkg.com/hot-shots/-/hot-shots-10.2.1.tgz#dbc70dd005c12f24b5484aa5af8d97446e9b945e" + integrity sha512-tmjcyZkG/qADhcdC7UjAp8D7v7W2DOYFgaZ48fYMuayMQmVVUg8fntKmrjes/b40ef6yZ+qt1lB8kuEDfLC4zw== + optionalDependencies: + unix-dgram "2.x" + hpack.js@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2" @@ -19109,6 +19324,19 @@ netlify@13.1.20, netlify@^13.1.20: p-wait-for "^4.0.0" qs "^6.9.6" +netlify@^13.1.21: + version "13.1.21" + resolved "https://registry.yarnpkg.com/netlify/-/netlify-13.1.21.tgz#f88eab0eea02aca3321aa813aa9fd01190e2dbf8" + integrity sha512-PLw+IskyiY+GZNvheR0JgBXIuwebKowY/JU1QBArnXT5Tza1cFbSRr2LJVdiAJCvtbYY73CapfJeSMp36nRjjQ== + dependencies: + "@netlify/open-api" "^2.34.0" + lodash-es "^4.17.21" + micro-api-client "^3.3.0" + node-fetch "^3.0.0" + omit.js "^2.0.2" + p-wait-for "^4.0.0" + qs "^6.9.6" + netmask@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"