diff --git a/.stylelintrc.json b/.stylelintrc.json index 53ed72c15c..4af5a2a752 100755 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -6,7 +6,11 @@ "length-zero-no-unit": [true, { "ignore": "custom-properties" }], "selector-type-no-unknown": [true, { "ignore": ["custom-elements"] }], "selector-pseudo-element-colon-notation": ["single", {}], - "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$" + "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", + "no-duplicate-selectors": null, + "selector-class-pattern": null, + "no-descending-specificity": null, + "declaration-block-no-redundant-longhand-properties": null }, "overrides": [ { diff --git a/package.json b/package.json index c9a44e5a19..e51a853d1f 100755 --- a/package.json +++ b/package.json @@ -423,5 +423,6 @@ "projects/*", "tools/*", "react/*" - ] + ], + "packageManager": "yarn@1.22.22" } diff --git a/packages/accordion/package.json b/packages/accordion/package.json index b4b43bae65..5de16d0fff 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -33,7 +33,9 @@ "development": "./src/AccordionItem.dev.js", "default": "./src/AccordionItem.js" }, + "./src/accordion-item-overrides.css.js": "./src/accordion-item-overrides.css.js", "./src/accordion-item.css.js": "./src/accordion-item.css.js", + "./src/accordion-overrides.css.js": "./src/accordion-overrides.css.js", "./src/accordion.css.js": "./src/accordion.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -73,7 +75,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/accordion": "^5.1.2" + "@spectrum-css/accordion": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index 4c68ce196d..a074f69171 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/packages/accordion/src/AccordionItem.ts @@ -22,6 +22,7 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import { when } from '@spectrum-web-components/base/src/directives.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import styles from './accordion-item.css.js'; @@ -69,7 +70,7 @@ export class AccordionItem extends SizedMixin(Focusable, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [styles, chevronIconStyles]; + return [styles, chevronIconStyles, chevronIconOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/accordion/src/accordion-item-overrides.css b/packages/accordion/src/accordion-item-overrides.css new file mode 100644 index 0000000000..b24c42a121 --- /dev/null +++ b/packages/accordion/src/accordion-item-overrides.css @@ -0,0 +1,36 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Accordion--sizeM { + --spectrum-accordion-item-height: var( + --system-accordion-size-m-item-height + ); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-m-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-m-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-m-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-m-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-m-item-header-bottom-to-text-space + ); +} diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css new file mode 100644 index 0000000000..bd9e613923 --- /dev/null +++ b/packages/accordion/src/accordion-overrides.css @@ -0,0 +1,340 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-accordion-item-width: var(--system-accordion-item-width); + --spectrum-accordion-disclosure-indicator-to-text-space: var( + --system-accordion-disclosure-indicator-to-text-space + ); + --spectrum-accordion-edge-to-disclosure-indicator-space: var( + --system-accordion-edge-to-disclosure-indicator-space + ); + --spectrum-accordion-edge-to-text-space: var( + --system-accordion-edge-to-text-space + ); + --spectrum-accordion-focus-indicator-gap: var( + --system-accordion-focus-indicator-gap + ); + --spectrum-accordion-focus-indicator-thickness: var( + --system-accordion-focus-indicator-thickness + ); + --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); + --spectrum-accordion-item-content-area-top-to-content: var( + --system-accordion-item-content-area-top-to-content + ); + --spectrum-accordion-item-content-area-bottom-to-content: var( + --system-accordion-item-content-area-bottom-to-content + ); + --spectrum-accordion-item-header-font: var( + --system-accordion-item-header-font + ); + --spectrum-accordion-item-header-font-weight: var( + --system-accordion-item-header-font-weight + ); + --spectrum-accordion-item-header-font-style: var( + --system-accordion-item-header-font-style + ); + --spectrum-accordion-item-header-line-height: var( + --system-accordion-item-header-line-height + ); + --spectrum-accordion-item-content-font: var( + --system-accordion-item-content-font + ); + --spectrum-accordion-item-content-font-weight: var( + --system-accordion-item-content-font-weight + ); + --spectrum-accordion-item-content-font-style: var( + --system-accordion-item-content-font-style + ); + --spectrum-accordion-item-content-line-height: var( + --system-accordion-item-content-line-height + ); + --spectrum-accordion-background-color-default: var( + --system-accordion-background-color-default + ); + --spectrum-accordion-background-color-hover: var( + --system-accordion-background-color-hover + ); + --spectrum-accordion-background-color-down: var( + --system-accordion-background-color-down + ); + --spectrum-accordion-background-color-key-focus: var( + --system-accordion-background-color-key-focus + ); + --spectrum-accordion-item-header-color-default: var( + --system-accordion-item-header-color-default + ); + --spectrum-accordion-item-header-color-hover: var( + --system-accordion-item-header-color-hover + ); + --spectrum-accordion-item-header-color-down: var( + --system-accordion-item-header-color-down + ); + --spectrum-accordion-item-header-color-key-focus: var( + --system-accordion-item-header-color-key-focus + ); + --spectrum-accordion-item-header-disabled-color: var( + --system-accordion-item-header-disabled-color + ); + --spectrum-accordion-item-content-disabled-color: var( + --system-accordion-item-content-disabled-color + ); + --spectrum-accordion-item-content-color: var( + --system-accordion-item-content-color + ); + --spectrum-accordion-focus-indicator-color: var( + --system-accordion-focus-indicator-color + ); + --spectrum-accordion-divider-color: var(--system-accordion-divider-color); + --spectrum-accordion-item-header-line-height-cjk: var( + --system-accordion-item-header-line-height-cjk + ); + --spectrum-accordion-item-content-line-height-cjk: var( + --system-accordion-item-content-line-height-cjk + ); + --spectrum-accordion-item-height: var(--system-accordion-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-item-header-bottom-to-text-space + ); +} + +:host([size='s']) { + --spectrum-accordion-item-height: var( + --system-accordion-size-s-item-height + ); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-s-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-s-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-s-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-s-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-s-item-header-bottom-to-text-space + ); +} + +.spectrum-Accordion--sizeM { + --spectrum-accordion-item-height: var( + --system-accordion-size-m-item-height + ); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-m-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-m-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-m-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-m-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-m-item-header-bottom-to-text-space + ); +} + +:host([size='l']) { + --spectrum-accordion-item-height: var( + --system-accordion-size-l-item-height + ); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-l-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-l-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-l-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-l-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-l-item-header-bottom-to-text-space + ); +} + +:host([size='xl']) { + --spectrum-accordion-item-height: var( + --system-accordion-size-xl-item-height + ); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-xl-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-xl-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-xl-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-xl-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-xl-item-header-bottom-to-text-space + ); +} + +:host([density='compact'][size='s']) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-s-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-s-item-header-bottom-to-text-space + ); +} + +:host([density='compact']) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-item-header-bottom-to-text-space + ); +} + +:host([density='compact']) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-m-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-m-item-header-bottom-to-text-space + ); +} + +:host([density='compact'][size='l']) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-l-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-l-item-header-bottom-to-text-space + ); +} + +:host([density='compact'][size='xl']) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-xl-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-xl-item-header-bottom-to-text-space + ); +} + +:host([density='spacious'][size='s']) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-s-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-s-item-header-bottom-to-text-space + ); +} + +:host([density='spacious']) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-item-header-bottom-to-text-space + ); +} + +:host([density='spacious']) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-m-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-m-item-header-bottom-to-text-space + ); +} + +:host([density='spacious'][size='l']) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-l-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-l-item-header-bottom-to-text-space + ); +} + +:host([density='spacious'][size='xl']) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-xl-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space + ); +} diff --git a/packages/accordion/src/accordion.css b/packages/accordion/src/accordion.css index 4d06f2fdd3..c43a5797f5 100644 --- a/packages/accordion/src/accordion.css +++ b/packages/accordion/src/accordion.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-accordion.css'); +@import url('./accordion-overrides.css'); :host { --spectrum-logical-rotation: ; diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 29010cbac2..62b4a13c44 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -315,17 +315,9 @@ governing permissions and limitations under the License. ); } -@media (forced-colors: active) { - #header:after { - forced-color-adjust: none; - content: ''; - position: absolute; - inset-inline-start: 0; - } -} - :host([open]) > #heading > .iconContainer > .indicator, :host([open]) > .iconContainer > .indicator { + transform: rotate(90deg); transform: var(--spectrum-logical-rotation,) rotate(90deg); } @@ -336,3 +328,12 @@ governing permissions and limitations under the License. :host([disabled]) #header { cursor: default; } + +@media (forced-colors: active) { + #header:after { + forced-color-adjust: none; + content: ''; + position: absolute; + inset-inline-start: 0; + } +} diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css index 3c0da6a3b2..c86c1c4862 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -12,105 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --spectrum-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --spectrum-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --spectrum-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --spectrum-accordion-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --spectrum-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --spectrum-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-accordion-item-header-font: var( - --spectrum-sans-font-family-stack - ); - --spectrum-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --spectrum-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); - --spectrum-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --spectrum-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --spectrum-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --spectrum-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --spectrum-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --spectrum-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --spectrum-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - --spectrum-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-accordion-divider-color: var(--spectrum-gray-300); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( @@ -132,161 +33,24 @@ governing permissions and limitations under the License. ) ) ); -} - -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + margin: 0; + padding: 0; + list-style: none; + display: block; } :host:lang(ja), :host:lang(ko), :host:lang(zh) { --spectrum-accordion-item-header-line-height: var( - --spectrum-cjk-line-height-100 + --spectrum-accordion-item-header-line-height-cjk ); --spectrum-accordion-item-content-line-height: var( - --spectrum-cjk-line-height-100 - ); -} - -:host([density='compact']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium + --spectrum-accordion-item-content-line-height-cjk ); } -:host([density='compact'][size='s']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-75); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); -} - -:host([density='compact'][size='l']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); -} - -:host([density='compact'][size='xl']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); -} - -:host([density='spacious']) { - --spectrum-accordion-item-header-line-height: 1.278; - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); -} - -:host([density='spacious'][size='s']) { - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); -} - -:host([density='spacious'][size='l']) { - --spectrum-accordion-item-header-line-height: 1.273; - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); -} - -:host([density='spacious'][size='xl']) { - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); -} - -:host([size='s']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --spectrum-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); -} - -:host([size='l']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --spectrum-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); -} - -:host([size='xl']) { - --spectrum-accordion-item-height: var(--spectrum-component-height-400); - --spectrum-accordion-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --spectrum-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); -} - -:host { - margin: 0; - padding: 0; - list-style: none; - display: block; +:host:dir(rtl), +:host([dir='rtl']) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } diff --git a/packages/accordion/src/spectrum-config.js b/packages/accordion/src/spectrum-config.js index fbf71615a7..57097ff6bf 100644 --- a/packages/accordion/src/spectrum-config.js +++ b/packages/accordion/src/spectrum-config.js @@ -100,6 +100,33 @@ const config = { replace: builder.pseudoClass('first-child'), hoist: true, }, + { + find: { + type: 'pseudo-class', + kind: 'not', + selectors: [ + [ + { + type: 'pseudo-class', + kind: 'first-of-type', + }, + ], + ], + }, + replace: { + type: 'pseudo-class', + kind: 'not', + selectors: [ + [ + { + type: 'pseudo-class', + kind: 'first-of-type', + }, + ], + ], + }, + hoist: true, + }, { find: [ builder.class('spectrum-Accordion-itemHeader'), diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index 1cf2726b0c..a3b38ed762 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -29,6 +29,7 @@ "development": "./src/ActionBar.dev.js", "default": "./src/ActionBar.js" }, + "./src/action-bar-overrides.css.js": "./src/action-bar-overrides.css.js", "./src/action-bar.css.js": "./src/action-bar.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/popover": "^0.47.2" }, "devDependencies": { - "@spectrum-css/actionbar": "^8.1.1" + "@spectrum-css/actionbar": "^9.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css new file mode 100644 index 0000000000..c6227c741f --- /dev/null +++ b/packages/action-bar/src/action-bar-overrides.css @@ -0,0 +1,73 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-actionbar-height: var(--system-action-bar-height); + --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); + --spectrum-actionbar-item-counter-font-size: var( + --system-action-bar-item-counter-font-size + ); + --spectrum-actionbar-item-counter-line-height: var( + --system-action-bar-item-counter-line-height + ); + --spectrum-actionbar-item-counter-color: var( + --system-action-bar-item-counter-color + ); + --spectrum-actionbar-item-counter-line-height-cjk: var( + --system-action-bar-item-counter-line-height-cjk + ); + --spectrum-actionbar-popover-background-color: var( + --system-action-bar-popover-background-color + ); + --spectrum-actionbar-popover-border-color: var( + --system-action-bar-popover-border-color + ); + --spectrum-actionbar-emphasized-background-color: var( + --system-action-bar-emphasized-background-color + ); + --spectrum-actionbar-emphasized-item-counter-color: var( + --system-action-bar-emphasized-item-counter-color + ); + --spectrum-actionbar-spacing-outer-edge: var( + --system-action-bar-spacing-outer-edge + ); + --spectrum-actionbar-spacing-close-button-top: var( + --system-action-bar-spacing-close-button-top + ); + --spectrum-actionbar-spacing-close-button-start: var( + --system-action-bar-spacing-close-button-start + ); + --spectrum-actionbar-spacing-close-button-end: var( + --system-action-bar-spacing-close-button-end + ); + --spectrum-actionbar-spacing-item-counter-top: var( + --system-action-bar-spacing-item-counter-top + ); + --spectrum-actionbar-spacing-item-counter-end: var( + --system-action-bar-spacing-item-counter-end + ); + --spectrum-actionbar-spacing-action-group-top: var( + --system-action-bar-spacing-action-group-top + ); + --spectrum-actionbar-spacing-action-group-end: var( + --system-action-bar-spacing-action-group-end + ); + --spectrum-actionbar-shadow-horizontal: var( + --system-action-bar-shadow-horizontal + ); + --spectrum-actionbar-shadow-vertical: var( + --system-action-bar-shadow-vertical + ); + --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); + --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); +} diff --git a/packages/action-bar/src/action-bar.css b/packages/action-bar/src/action-bar.css index 317d5edb3e..dbde6e2c75 100644 --- a/packages/action-bar/src/action-bar.css +++ b/packages/action-bar/src/action-bar.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-action-bar.css'); +@import url('./action-bar-overrides.css'); :host { display: block; diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css index 96908ff527..d12552d3d2 100644 --- a/packages/action-bar/src/spectrum-action-bar.css +++ b/packages/action-bar/src/spectrum-action-bar.css @@ -11,48 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); - --spectrum-actionbar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --spectrum-actionbar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - --spectrum-actionbar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); - --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var( - --spectrum-spacing-100 - ); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - --spectrum-actionbar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); -} - -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-actionbar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); -} - @media (forced-colors: active) { :host, :host([emphasized]) #popover { diff --git a/packages/action-button/package.json b/packages/action-button/package.json index e130b13d95..699ff1c380 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -29,6 +29,7 @@ "development": "./src/ActionButton.dev.js", "default": "./src/ActionButton.js" }, + "./src/action-button-overrides.css.js": "./src/action-button-overrides.css.js", "./src/action-button.css.js": "./src/action-button.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/actionbutton": "^6.1.1" + "@spectrum-css/actionbutton": "^7.0.0-s2-foundations.20" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts index 6746b6154e..56680ac818 100644 --- a/packages/action-button/src/ActionButton.ts +++ b/packages/action-button/src/ActionButton.ts @@ -22,6 +22,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js'; import { ButtonBase } from '@spectrum-web-components/button'; import buttonStyles from './action-button.css.js'; import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js'; +import cornerTriangleOverrides from '@spectrum-web-components/icon/src/icon-corner-triangle-overrides.css.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js'; const holdAffordanceClass = { @@ -54,7 +55,12 @@ export class ActionButton extends SizedMixin(ButtonBase, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [...super.styles, buttonStyles, cornerTriangleStyles]; + return [ + ...super.styles, + buttonStyles, + cornerTriangleStyles, + cornerTriangleOverrides, + ]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css new file mode 100644 index 0000000000..a72b7589d9 --- /dev/null +++ b/packages/action-button/src/action-button-overrides.css @@ -0,0 +1,573 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-actionbutton-animation-duration: var( + --system-action-button-animation-duration + ); + --spectrum-actionbutton-border-radius: var( + --system-action-button-border-radius + ); + --spectrum-actionbutton-border-width: var( + --system-action-button-border-width + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-content-color-focus + ); + --spectrum-actionbutton-focus-indicator-gap: var( + --system-action-button-focus-indicator-gap + ); + --spectrum-actionbutton-focus-indicator-thickness: var( + --system-action-button-focus-indicator-thickness + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-focus-indicator-color + ); + --spectrum-actionbutton-background-color-default: var( + --system-action-button-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-background-color-focus + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-border-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-border-color-disabled + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-content-color-disabled + ); + --spectrum-actionbutton-min-width: var(--system-action-button-min-width); + --spectrum-actionbutton-height: var(--system-action-button-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-font-size); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-edge-to-text-size + ); +} + +:host([quiet]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-quiet-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-quiet-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-quiet-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-quiet-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-quiet-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-quiet-border-color-disabled + ); +} + +:host([selected]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-selected-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-selected-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-selected-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-selected-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-selected-content-color-focus + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-selected-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-selected-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-selected-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-selected-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-selected-border-color-disabled + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-selected-background-color-disabled + ); +} + +:host([selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-selected-emphasized-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-selected-emphasized-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-selected-emphasized-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-selected-emphasized-content-color-focus + ); +} + +:host([static='black'][quiet]) { + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-black-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-black-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-black-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-black-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-quiet-border-color-disabled + ); +} + +:host([static='white'][quiet]) { + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-white-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-white-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-white-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-white-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-quiet-border-color-disabled + ); +} + +:host([static='black']) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-black-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-black-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-black-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-black-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-black-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-black-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-black-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-black-content-color-focus + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-static-black-content-color-disabled + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-static-black-focus-indicator-color + ); +} + +:host([static='black'][selected]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-selected-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-black-selected-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-selected-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-selected-content-color-default + ); +} + +:host([static='black'][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-selected-emphasized-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-black-selected-emphasized-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-black-selected-emphasized-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-black-selected-emphasized-content-color-focus + ); +} + +:host([static='white']) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-white-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-white-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-white-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-white-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-white-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-white-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-white-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-white-content-color-focus + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-static-white-content-color-disabled + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-static-white-focus-indicator-color + ); +} + +:host([static='white'][selected]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-selected-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-white-selected-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-selected-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-selected-content-color-default + ); +} + +:host([static='white'][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-selected-emphasized-content-color-default + ); +} + +:host([size='xs']) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-xs-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-xs-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-xs-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-xs-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-xs-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-xs-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-xs-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-xs-edge-to-text-size + ); +} + +:host([size='s']) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-s-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-s-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-s-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-s-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-s-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-s-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-s-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-s-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-s-edge-to-text-size + ); +} + +:host { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-m-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-m-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-m-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-m-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-m-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-m-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-m-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-m-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-m-edge-to-text-size + ); +} + +:host([size='l']) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-l-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-l-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-l-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-l-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-l-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-l-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-l-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-l-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-l-edge-to-text-size + ); +} + +:host([size='xl']) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-xl-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-xl-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-xl-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-xl-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-xl-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-xl-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-xl-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-xl-edge-to-text-size + ); +} diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css index 4a30490e95..b732dd78cc 100644 --- a/packages/action-button/src/action-button.css +++ b/packages/action-button/src/action-button.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-action-button.css'); +@import url('./action-button-overrides.css'); ::slotted([slot='icon']) { flex-shrink: 0; @@ -22,9 +23,44 @@ governing permissions and limitations under the License. pointer-events: none !important; } +/* confirm with css if we can keep it as css level */ + :host([size='xs']) { /* Work around non-square icon only Action Buttons in Spectrum CSS */ min-width: var(--spectrum-actionbutton-height, 0); + + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-component-edge-to-visual-only-50) - + var(--spectrum-actionbutton-border-width) + ); +} + +:host([size='s']) { + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-component-edge-to-visual-only-75) - + var(--spectrum-actionbutton-border-width) + ); +} + +:host([size='m']) { + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-component-edge-to-visual-only-100) - + var(--spectrum-actionbutton-border-width) + ); +} + +:host([size='l']) { + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-component-edge-to-visual-only-200) - + var(--spectrum-actionbutton-border-width) + ); +} + +:host([size='xl']) { + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-component-edge-to-visual-only-300) - + var(--spectrum-actionbutton-border-width) + ); } @media (forced-colors: active) { diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 0ceba8c189..0d8aaa569b 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -23,6 +23,8 @@ governing permissions and limitations under the License. var(--spectrum-sans-font-family-stack) ) ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; line-height: var( --mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)) @@ -67,8 +69,6 @@ governing permissions and limitations under the License. ) ) ease-out; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; border-style: solid; justify-content: center; align-items: center; @@ -102,244 +102,6 @@ governing permissions and limitations under the License. display: none; } -:host { - --spectrum-actionbutton-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); - --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); - --spectrum-actionbutton-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-actionbutton-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-actionbutton-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-actionbutton-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-actionbutton-focus-indicator-border-radius: calc( - var(--spectrum-actionbutton-border-radius) + - var(--spectrum-actionbutton-focus-indicator-gap) - ); -} - -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); -} - -:host([selected]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected, - var(--spectrum-neutral-background-color-selected-default) - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected, - var(--spectrum-neutral-background-color-selected-hover) - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected, - var(--spectrum-neutral-background-color-selected-down) - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected, - var(--spectrum-neutral-background-color-selected-key-focus) - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected, - var(--spectrum-gray-50) - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected, - var(--spectrum-gray-50) - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected, - var(--spectrum-gray-50) - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected, - var(--spectrum-gray-50) - ); -} - -:host([selected][emphasized]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected-emphasized, - var(--spectrum-accent-background-color-default) - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected-emphasized, - var(--spectrum-accent-background-color-hover) - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected-emphasized, - var(--spectrum-accent-background-color-down) - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected-emphasized, - var(--spectrum-accent-background-color-key-focus) - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected-emphasized, - var(--spectrum-white) - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected-emphasized, - var(--spectrum-white) - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected-emphasized, - var(--spectrum-white) - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected-emphasized, - var(--spectrum-white) - ); -} - -:host([size='xs']) { - --spectrum-actionbutton-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --spectrum-actionbutton-height: var(--spectrum-component-height-50); - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-component-edge-to-visual-50) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-component-edge-to-text-50) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-component-edge-to-visual-only-50) - - var(--spectrum-actionbutton-border-width) - ); -} - -:host([size='s']) { - --spectrum-actionbutton-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --spectrum-actionbutton-height: var(--spectrum-component-height-75); - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-component-edge-to-visual-75) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-component-edge-to-text-75) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-component-edge-to-visual-only-75) - - var(--spectrum-actionbutton-border-width) - ); -} - -:host { - --spectrum-actionbutton-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --spectrum-actionbutton-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-component-edge-to-visual-100) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-component-edge-to-text-100) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-component-edge-to-visual-only-100) - - var(--spectrum-actionbutton-border-width) - ); -} - -:host([size='l']) { - --spectrum-actionbutton-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --spectrum-actionbutton-height: var(--spectrum-component-height-200); - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-component-edge-to-visual-200) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-component-edge-to-text-200) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-component-edge-to-visual-only-200) - - var(--spectrum-actionbutton-border-width) - ); -} - -:host([size='xl']) { - --spectrum-actionbutton-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --spectrum-actionbutton-height: var(--spectrum-component-height-300); - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-component-edge-to-visual-300) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-component-edge-to-text-300) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-component-edge-to-visual-only-300) - - var(--spectrum-actionbutton-border-width) - ); -} - @media (forced-colors: active) { :host { --highcontrast-actionbutton-focus-indicator-color: ButtonText; @@ -375,6 +137,22 @@ governing permissions and limitations under the License. } :host { + --spectrum-actionbutton-focus-indicator-border-radius: calc( + var(--spectrum-actionbutton-border-radius) + + var(--spectrum-actionbutton-focus-indicator-gap) + ); + --spectrum-actionbutton-edge-to-visual: calc( + var(--spectrum-actionbutton-edge-to-visual-size) - + var(--spectrum-actionbutton-border-width) + ); + --spectrum-actionbutton-edge-to-text: calc( + var(--spectrum-actionbutton-edge-to-text-size) - + var(--spectrum-actionbutton-border-width) + ); + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-actionbutton-edge-to-visual-only-size) - + var(--spectrum-actionbutton-border-width) + ); min-inline-size: var( --mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width) @@ -433,6 +211,11 @@ governing permissions and limitations under the License. position: relative; } +:host:dir(rtl), +:host([dir='rtl']) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +} + @media (hover: hover) { :host(:hover) { background-color: var( @@ -585,6 +368,7 @@ governing permissions and limitations under the License. var(--spectrum-actionbutton-font-size) ); white-space: nowrap; + color: inherit; color: var(--mod-actionbutton-label-color, inherit); text-overflow: ellipsis; overflow: hidden; @@ -673,321 +457,3 @@ governing permissions and limitations under the License. ) ); } - -:host { - --spectrum-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-border-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-border-color-disabled - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-spectrum-actionbutton-content-color-disabled - ); -} - -:host([quiet]) { - --spectrum-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-quiet-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-quiet-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-quiet-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-quiet-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-quiet-border-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-quiet-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-quiet-border-color-disabled - ); -} - -:host([selected]) { - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-selected-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-selected-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-selected-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-selected-border-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-selected-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-selected-border-color-disabled - ); -} - -:host([static='black'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-staticblack-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-staticblack-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-staticblack-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-staticblack-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled - ); -} - -:host([static='white'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-staticwhite-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-staticwhite-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled - ); -} - -:host([static='black']) { - --spectrum-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-staticblack-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-staticblack-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-staticblack-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-staticblack-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-staticblack-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-staticblack-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-staticblack-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-staticblack-border-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-spectrum-actionbutton-staticblack-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-spectrum-actionbutton-staticblack-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-spectrum-actionbutton-staticblack-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-spectrum-actionbutton-staticblack-content-color-focus - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-spectrum-actionbutton-staticblack-focus-indicator-color - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-staticblack-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticblack-border-color-disabled - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-spectrum-actionbutton-staticblack-content-color-disabled - ); -} - -:host([static='black'][selected]) { - --mod-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default - ); - --mod-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover - ); - --mod-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down - ); - --mod-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default - ) - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover - ) - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down - ) - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus - ) - ); - --mod-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled - ); - --mod-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled - ); -} - -:host([static='white']) { - --spectrum-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-staticwhite-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-staticwhite-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-staticwhite-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-staticwhite-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-spectrum-actionbutton-staticwhite-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-spectrum-actionbutton-staticwhite-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-spectrum-actionbutton-staticwhite-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-spectrum-actionbutton-staticwhite-border-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-spectrum-actionbutton-staticwhite-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-spectrum-actionbutton-staticwhite-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-spectrum-actionbutton-staticwhite-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-spectrum-actionbutton-staticwhite-content-color-focus - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-spectrum-actionbutton-staticwhite-focus-indicator-color - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-border-color-disabled - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-content-color-disabled - ); -} - -:host([static='white'][selected]) { - --mod-actionbutton-background-color-default: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default - ); - --mod-actionbutton-background-color-hover: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover - ); - --mod-actionbutton-background-color-down: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down - ); - --mod-actionbutton-background-color-focus: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default - ) - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover - ) - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down - ) - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-static-content-color, - var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus - ) - ); - --mod-actionbutton-background-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled - ); - --mod-actionbutton-border-color-disabled: var( - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled - ); -} diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js index 743d219aba..278f03bb34 100644 --- a/packages/action-button/src/spectrum-config.js +++ b/packages/action-button/src/spectrum-config.js @@ -27,6 +27,7 @@ const config = { inPackage: '@spectrum-css/actionbutton', outPackage: 'action-button', fileName: 'action-button', + systemOverrides: true, excludeByComponents: [ { type: 'type', @@ -187,6 +188,33 @@ const config = { }, ], }, + { + find: { + type: 'pseudo-class', + kind: 'not', + selectors: [ + [ + { + type: 'pseudo-class', + kind: 'disabled', + }, + ], + ], + }, + replace: { + type: 'pseudo-class', + kind: 'not', + selectors: [ + [ + { + type: 'pseudo-class', + kind: 'disabled', + }, + ], + ], + }, + hoist: true, + }, ], }, ], diff --git a/packages/action-group/package.json b/packages/action-group/package.json index 44570438c5..d7b2456c7c 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -29,6 +29,7 @@ "development": "./src/ActionGroup.dev.js", "default": "./src/ActionGroup.js" }, + "./src/action-group-overrides.css.js": "./src/action-group-overrides.css.js", "./src/action-group.css.js": "./src/action-group.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/reactive-controllers": "^0.47.2" }, "devDependencies": { - "@spectrum-css/actiongroup": "^5.1.0" + "@spectrum-css/actiongroup": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css new file mode 100644 index 0000000000..10f612dac3 --- /dev/null +++ b/packages/action-group/src/action-group-overrides.css @@ -0,0 +1,84 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-actiongroup-gap-size-compact: var( + --system-action-group-gap-size-compact + ); + --spectrum-actiongroup-horizontal-spacing-compact: var( + --system-action-group-horizontal-spacing-compact + ); + --spectrum-actiongroup-vertical-spacing-compact: var( + --system-action-group-vertical-spacing-compact + ); + --spectrum-actiongroup-button-spacing-reset: var( + --system-action-group-button-spacing-reset + ); + --spectrum-actiongroup-border-radius-reset: var( + --system-action-group-border-radius-reset + ); + --spectrum-actiongroup-border-radius: var( + --system-action-group-border-radius + ); + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-vertical-spacing-regular + ); +} + +:host([size='xs']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-xs-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-xs-vertical-spacing-regular + ); +} + +:host([size='s']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-s-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-s-vertical-spacing-regular + ); +} + +:host { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-m-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-m-vertical-spacing-regular + ); +} + +:host([size='l']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-l-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-l-vertical-spacing-regular + ); +} + +:host([size='xl']) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-xl-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-xl-vertical-spacing-regular + ); +} diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css index 37bef2423d..d9bdf11123 100644 --- a/packages/action-group/src/action-group.css +++ b/packages/action-group/src/action-group.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-action-group.css'); +@import url('./action-group-overrides.css'); :host([size='xs']) { --spectrum-actiongroup-horizontal-spacing-regular: var( diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 4d88f5b3de..462d1c72e2 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -11,31 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-actiongroup-button-spacing-reset: 0; - --spectrum-actiongroup-border-radius-reset: 0; - --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); -} - -:host([size='s']), -:host([size='xs']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); -} - -:host([size='l']), -:host, -:host([size='xl']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); -} - :host { gap: var( --mod-actiongroup-horizontal-spacing-regular, @@ -261,15 +236,3 @@ governing permissions and limitations under the License. :host([justified]) ::slotted(*) { flex: 1; } - -:host { - --spectrum-actiongroup-gap-size-compact: var( - --system-spectrum-actiongroup-gap-size-compact - ); - --spectrum-actiongroup-horizontal-spacing-compact: var( - --system-spectrum-actiongroup-horizontal-spacing-compact - ); - --spectrum-actiongroup-vertical-spacing-compact: var( - --system-spectrum-actiongroup-vertical-spacing-compact - ); -} diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index c09f5a672f..4f6efa07cf 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/actionmenu": "^6.1.1" + "@spectrum-css/actionmenu": "^7.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index 5311846877..47efcc8ea0 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/packages/action-menu/src/ActionMenu.ts @@ -82,7 +82,10 @@ export class ActionMenu extends ObserveSlotPresence( ?icon-only=${!this.hasLabel} ?hidden=${this.labelOnly} > - + `} diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index c80197a4cf..6821118932 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -29,6 +29,7 @@ "development": "./src/AlertBanner.dev.js", "default": "./src/AlertBanner.js" }, + "./src/alert-banner-overrides.css.js": "./src/alert-banner-overrides.css.js", "./src/alert-banner.css.js": "./src/alert-banner.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -62,7 +63,7 @@ "@spectrum-web-components/icons-workflow": "^0.47.2" }, "devDependencies": { - "@spectrum-css/alertbanner": "^2.2.0" + "@spectrum-css/alertbanner": "^3.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css new file mode 100644 index 0000000000..733e387e43 --- /dev/null +++ b/packages/alert-banner/src/alert-banner-overrides.css @@ -0,0 +1,45 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-alert-banner-neutral-background: var( + --system-alert-banner-neutral-background + ); + --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); + --spectrum-alert-banner-max-inline-size: var( + --system-alert-banner-max-inline-size + ); + --spectrum-alert-banner-size: var(--system-alert-banner-size); + --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); + --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); + --spectrum-alert-banner-icon-to-text: var( + --system-alert-banner-icon-to-text + ); + --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); + --spectrum-alert-banner-text-to-button-horizontal: var( + --system-alert-banner-text-to-button-horizontal + ); + --spectrum-alert-banner-text-to-divider: var( + --system-alert-banner-text-to-divider + ); + --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); + --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); + --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); + --spectrum-alert-banner-informative-background: var( + --system-alert-banner-informative-background + ); + --spectrum-alert-banner-negative-background: var( + --system-alert-banner-negative-background + ); + --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); +} diff --git a/packages/alert-banner/src/alert-banner.css b/packages/alert-banner/src/alert-banner.css index c4be1e776d..b0db472bd2 100644 --- a/packages/alert-banner/src/alert-banner.css +++ b/packages/alert-banner/src/alert-banner.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-alert-banner.css'); +@import url('./alert-banner-overrides.css'); diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/packages/alert-banner/src/spectrum-alert-banner.css index 15151bf37f..49c1693029 100644 --- a/packages/alert-banner/src/spectrum-alert-banner.css +++ b/packages/alert-banner/src/spectrum-alert-banner.css @@ -12,33 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-size: auto; - --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --spectrum-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --spectrum-alert-banner-font-color: var(--spectrum-white); --mod-divider-vertical-margin: var( --mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider) @@ -84,9 +57,13 @@ governing permissions and limitations under the License. var(--spectrum-alert-banner-font-color) ); background-color: var( - --mod-alert-banner-netural-background, - var(--spectrum-alert-banner-netural-background) + --mod-alert-banner-neutral-background, + var( + --mod-alert-banner-neutral-background, + var(--spectrum-alert-banner-neutral-background) + ) ); + border: 0 solid #0000; border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); justify-content: space-between; @@ -187,9 +164,3 @@ governing permissions and limitations under the License. ); } } - -:host { - --spectrum-alert-banner-netural-background: var( - --system-spectrum-alertbanner-spectrum-alert-banner-netural-background - ); -} diff --git a/packages/alert-banner/src/spectrum-config.js b/packages/alert-banner/src/spectrum-config.js index d98b889c8a..5f2c2104c8 100644 --- a/packages/alert-banner/src/spectrum-config.js +++ b/packages/alert-banner/src/spectrum-config.js @@ -24,6 +24,7 @@ const config = { inPackage: '@spectrum-css/alertbanner', outPackage: 'alert-banner', fileName: 'alert-banner', + systemOverrides: true, components: [ converter.classToHost(), converter.classToAttribute('is-open', 'open'), diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index 8e280accb1..2612e361a4 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -29,6 +29,7 @@ "development": "./src/AlertDialog.dev.js", "default": "./src/AlertDialog.js" }, + "./src/alert-dialog-overrides.css.js": "./src/alert-dialog-overrides.css.js", "./src/alert-dialog.css.js": "./src/alert-dialog.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -66,7 +67,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/alertdialog": "^2.1.1" + "@spectrum-css/alertdialog": "^3.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-dialog/src/alert-dialog-overrides.css b/packages/alert-dialog/src/alert-dialog-overrides.css new file mode 100644 index 0000000000..de7d0f1833 --- /dev/null +++ b/packages/alert-dialog/src/alert-dialog-overrides.css @@ -0,0 +1,65 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); + --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); + --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); + --spectrum-alert-dialog-warning-icon-color: var( + --system-alert-dialog-warning-icon-color + ); + --spectrum-alert-dialog-error-icon-color: var( + --system-alert-dialog-error-icon-color + ); + --spectrum-alert-dialog-title-font-family: var( + --system-alert-dialog-title-font-family + ); + --spectrum-alert-dialog-title-font-weight: var( + --system-alert-dialog-title-font-weight + ); + --spectrum-alert-dialog-title-font-style: var( + --system-alert-dialog-title-font-style + ); + --spectrum-alert-dialog-title-font-size: var( + --system-alert-dialog-title-font-size + ); + --spectrum-alert-dialog-title-line-height: var( + --system-alert-dialog-title-line-height + ); + --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); + --spectrum-alert-dialog-body-font-family: var( + --system-alert-dialog-body-font-family + ); + --spectrum-alert-dialog-body-font-weight: var( + --system-alert-dialog-body-font-weight + ); + --spectrum-alert-dialog-body-font-style: var( + --system-alert-dialog-body-font-style + ); + --spectrum-alert-dialog-body-font-size: var( + --system-alert-dialog-body-font-size + ); + --spectrum-alert-dialog-body-line-height: var( + --system-alert-dialog-body-line-height + ); + --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); + --spectrum-alert-dialog-title-to-divider: var( + --system-alert-dialog-title-to-divider + ); + --spectrum-alert-dialog-divider-to-description: var( + --system-alert-dialog-divider-to-description + ); + --spectrum-alert-dialog-title-to-icon: var( + --system-alert-dialog-title-to-icon + ); +} diff --git a/packages/alert-dialog/src/alert-dialog.css b/packages/alert-dialog/src/alert-dialog.css index c4f1ef3a73..5214291072 100644 --- a/packages/alert-dialog/src/alert-dialog.css +++ b/packages/alert-dialog/src/alert-dialog.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-alert-dialog.css'); +@import url('./alert-dialog-overrides.css'); diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css index cf375af150..c9ac8a1f7e 100644 --- a/packages/alert-dialog/src/spectrum-alert-dialog.css +++ b/packages/alert-dialog/src/spectrum-alert-dialog.css @@ -12,55 +12,8 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-dialog-min-width: var( - --spectrum-alert-dialog-minimum-width - ); - --spectrum-alert-dialog-max-width: var( - --spectrum-alert-dialog-maximum-width - ); - --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --spectrum-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --spectrum-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --spectrum-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --spectrum-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); - --spectrum-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --spectrum-alert-dialog-body-color: var(--spectrum-body-color); - --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); --mod-buttongroup-justify-content: flex-end; box-sizing: border-box; - inline-size: -moz-fit-content; inline-size: fit-content; min-inline-size: var( --mod-alert-dialog-min-width, diff --git a/packages/asset/package.json b/packages/asset/package.json index 4f941d05ea..a68be4a8e4 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -29,6 +29,7 @@ "development": "./src/Asset.dev.js", "default": "./src/Asset.js" }, + "./src/asset-overrides.css.js": "./src/asset-overrides.css.js", "./src/asset.css.js": "./src/asset.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -60,7 +61,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/asset": "^5.1.1" + "@spectrum-css/asset": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css new file mode 100644 index 0000000000..88e6974a2b --- /dev/null +++ b/packages/asset/src/asset-overrides.css @@ -0,0 +1,25 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-asset-transition-duration: var( + --system-asset-transition-duration + ); + --spectrum-asset-folder-background-color: var( + --system-asset-folder-background-color + ); + --spectrum-asset-file-background-color: var( + --system-asset-file-background-color + ); + --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); +} diff --git a/packages/asset/src/asset.css b/packages/asset/src/asset.css index 27143a936c..f6db5c890a 100644 --- a/packages/asset/src/asset.css +++ b/packages/asset/src/asset.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-asset.css'); +@import url('./asset-overrides.css'); diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css index 8985a9bb71..06229170f6 100644 --- a/packages/asset/src/spectrum-asset.css +++ b/packages/asset/src/spectrum-asset.css @@ -23,36 +23,47 @@ governing permissions and limitations under the License. max-inline-size: 100%; max-block-size: 100%; object-fit: contain; - transition: opacity var(--spectrum-animation-duration-100); + transition: opacity var(--spectrum-asset-transition-duration); } .file, .folder { + inline-size: max(48px, min(100%, 80px)); inline-size: max( var(--mod-asset-icon-min-width, 48px), min(100%, var(--mod-asset-icon-max-width, 80px)) ); block-size: 100%; + margin: 20px; margin: var(--mod-asset-icon-margin, 20px); } .folderBackground { fill: var( --highcontrast-asset-folder-background-color, - var(--mod-asset-folder-background-color, var(--spectrum-gray-300)) + var( + --mod-asset-folder-background-color, + var(--spectrum-asset-folder-background-color) + ) ); } .fileBackground { fill: var( --highcontrast-asset-file-background-color, - var(--mod-asset-file-background-color, var(--spectrum-gray-50)) + var( + --mod-asset-file-background-color, + var(--spectrum-asset-file-background-color) + ) ); } .fileOutline, .folderOutline { - fill: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + fill: var( + --mod-asset-icon-outline-color, + var(--spectrum-asset-icon-outline-color) + ); } @media (forced-colors: active) { diff --git a/packages/avatar/package.json b/packages/avatar/package.json index ce10ac5ebe..5556deecd5 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -29,6 +29,7 @@ "development": "./src/Avatar.dev.js", "default": "./src/Avatar.js" }, + "./src/avatar-overrides.css.js": "./src/avatar-overrides.css.js", "./src/avatar.css.js": "./src/avatar.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/avatar": "^7.1.1" + "@spectrum-css/avatar": "^8.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/src/avatar-overrides.css b/packages/avatar/src/avatar-overrides.css new file mode 100644 index 0000000000..b7329c6bf7 --- /dev/null +++ b/packages/avatar/src/avatar-overrides.css @@ -0,0 +1,75 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); + --spectrum-avatar-inline-size: var(--system-avatar-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-block-size); + --spectrum-avatar-focus-indicator-thickness: var( + --system-avatar-focus-indicator-thickness + ); + --spectrum-avatar-focus-indicator-gap: var( + --system-avatar-focus-indicator-gap + ); + --spectrum-avatar-focus-indicator-color: var( + --system-avatar-focus-indicator-color + ); + --spectrum-avatar-color-opacity-disabled: var( + --system-avatar-color-opacity-disabled + ); +} + +:host([size='50']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size); +} + +:host([size='75']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size); +} + +:host([size='100']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size); +} + +:host([size='200']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size); +} + +:host([size='300']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size); +} + +:host([size='400']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size); +} + +:host([size='500']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size); +} + +:host([size='600']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size); +} + +:host([size='700']) { + --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); +} diff --git a/packages/avatar/src/avatar.css b/packages/avatar/src/avatar.css index 2db2fea61f..f536bb92a6 100644 --- a/packages/avatar/src/avatar.css +++ b/packages/avatar/src/avatar.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-avatar.css'); +@import url('./avatar-overrides.css'); img { vertical-align: top; diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index ba9f2d69ea..07aff46824 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -11,68 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-avatar-color-opacity: 1; - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - --spectrum-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); -} - -:host([size='50']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); -} - -:host([size='75']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); -} - -:host([size='100']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); -} - -:host([size='200']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); -} - -:host([size='300']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); -} - -:host([size='400']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); -} - -:host([size='500']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); -} - -:host([size='600']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); -} - -:host([size='700']) { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); -} - @media (forced-colors: active) { :host { --highcontrast-avatar-focus-indicator-color: CanvasText; @@ -80,6 +18,7 @@ governing permissions and limitations under the License. } :host { + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); inline-size: var( --mod-avatar-inline-size, var(--spectrum-avatar-inline-size) @@ -113,6 +52,7 @@ governing permissions and limitations under the License. ); } +:host(:not([disabled])) .is-focused:after, :host(:not([disabled])) .link:focus-visible:after { pointer-events: none; content: ''; @@ -174,7 +114,7 @@ governing permissions and limitations under the License. } .link { - outline: solid #0000; + outline: 0; } .image { diff --git a/packages/badge/package.json b/packages/badge/package.json index 559c4a7cc1..77a117bac1 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -29,6 +29,7 @@ "development": "./src/Badge.dev.js", "default": "./src/Badge.js" }, + "./src/badge-overrides.css.js": "./src/badge-overrides.css.js", "./src/badge.css.js": "./src/badge.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/badge": "^4.1.1" + "@spectrum-css/badge": "^5.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/badge/src/badge-overrides.css b/packages/badge/src/badge-overrides.css new file mode 100644 index 0000000000..f02f512bfe --- /dev/null +++ b/packages/badge/src/badge-overrides.css @@ -0,0 +1,270 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-badge-corner-radius: var(--system-badge-corner-radius); + --spectrum-badge-line-height: var(--system-badge-line-height); + --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); + --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color); + --spectrum-badge-background-color-default: var( + --system-badge-background-color-default + ); + --spectrum-badge-background-color-accent: var( + --system-badge-background-color-accent + ); + --spectrum-badge-background-color-informative: var( + --system-badge-background-color-informative + ); + --spectrum-badge-background-color-negative: var( + --system-badge-background-color-negative + ); + --spectrum-badge-background-color-positive: var( + --system-badge-background-color-positive + ); + --spectrum-badge-background-color-notice: var( + --system-badge-background-color-notice + ); + --spectrum-badge-background-color-gray: var( + --system-badge-background-color-gray + ); + --spectrum-badge-background-color-red: var( + --system-badge-background-color-red + ); + --spectrum-badge-background-color-orange: var( + --system-badge-background-color-orange + ); + --spectrum-badge-background-color-yellow: var( + --system-badge-background-color-yellow + ); + --spectrum-badge-background-color-chartreuse: var( + --system-badge-background-color-chartreuse + ); + --spectrum-badge-background-color-celery: var( + --system-badge-background-color-celery + ); + --spectrum-badge-background-color-green: var( + --system-badge-background-color-green + ); + --spectrum-badge-background-color-seafoam: var( + --system-badge-background-color-seafoam + ); + --spectrum-badge-background-color-cyan: var( + --system-badge-background-color-cyan + ); + --spectrum-badge-background-color-blue: var( + --system-badge-background-color-blue + ); + --spectrum-badge-background-color-indigo: var( + --system-badge-background-color-indigo + ); + --spectrum-badge-background-color-purple: var( + --system-badge-background-color-purple + ); + --spectrum-badge-background-color-fuchsia: var( + --system-badge-background-color-fuchsia + ); + --spectrum-badge-background-color-magenta: var( + --system-badge-background-color-magenta + ); + --spectrum-badge-height: var(--system-badge-height); + --spectrum-badge-font-size: var(--system-badge-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-icon-only-spacing-horizontal + ); +} + +:host([variant='orange']) { + --spectrum-badge-label-icon-color: var( + --system-badge-orange-label-icon-color + ); +} + +:host([variant='yellow']) { + --spectrum-badge-label-icon-color: var( + --system-badge-yellow-label-icon-color + ); +} + +:host([variant='chartreuse']) { + --spectrum-badge-label-icon-color: var( + --system-badge-chartreuse-label-icon-color + ); +} + +:host([variant='celery']) { + --spectrum-badge-label-icon-color: var( + --system-badge-celery-label-icon-color + ); +} + +:host([variant='gray']) { + --spectrum-badge-label-icon-color: var( + --system-badge-gray-label-icon-color + ); +} + +:host([variant='red']) { + --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color); +} + +:host([variant='green']) { + --spectrum-badge-label-icon-color: var( + --system-badge-green-label-icon-color + ); +} + +:host([variant='seafoam']) { + --spectrum-badge-label-icon-color: var( + --system-badge-seafoam-label-icon-color + ); +} + +:host([variant='cyan']) { + --spectrum-badge-label-icon-color: var( + --system-badge-cyan-label-icon-color + ); +} + +:host([variant='blue']) { + --spectrum-badge-label-icon-color: var( + --system-badge-blue-label-icon-color + ); +} + +:host([variant='indigo']) { + --spectrum-badge-label-icon-color: var( + --system-badge-indigo-label-icon-color + ); +} + +:host([variant='purple']) { + --spectrum-badge-label-icon-color: var( + --system-badge-purple-label-icon-color + ); +} + +:host([variant='fuchsia']) { + --spectrum-badge-label-icon-color: var( + --system-badge-fuchsia-label-icon-color + ); +} + +:host([variant='magenta']) { + --spectrum-badge-label-icon-color: var( + --system-badge-magenta-label-icon-color + ); +} + +:host([size='s']) { + --spectrum-badge-height: var(--system-badge-size-s-height); + --spectrum-badge-font-size: var(--system-badge-size-s-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-s-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-s-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-s-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-s-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-s-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-s-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-s-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-s-icon-only-spacing-horizontal + ); +} + +:host([size='l']) { + --spectrum-badge-height: var(--system-badge-size-l-height); + --spectrum-badge-font-size: var(--system-badge-size-l-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-l-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-l-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-l-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-l-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-l-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-l-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-l-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-l-icon-only-spacing-horizontal + ); +} + +:host([size='xl']) { + --spectrum-badge-height: var(--system-badge-size-xl-height); + --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-xl-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-xl-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-xl-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-xl-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-xl-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-xl-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-xl-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-xl-icon-only-spacing-horizontal + ); +} diff --git a/packages/badge/src/badge.css b/packages/badge/src/badge.css index 371e03c297..af0eafd465 100644 --- a/packages/badge/src/badge.css +++ b/packages/badge/src/badge.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-badge.css'); +@import url('./badge-overrides.css'); /* center align icons and text */ diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css index a315b66b16..a69ad6cec0 100644 --- a/packages/badge/src/spectrum-badge.css +++ b/packages/badge/src/spectrum-badge.css @@ -11,192 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-badge-line-height: var(--spectrum-line-height-100); - --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-badge-label-icon-color: var(--spectrum-white); - --spectrum-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --spectrum-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --spectrum-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --spectrum-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --spectrum-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --spectrum-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --spectrum-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --spectrum-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --spectrum-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --spectrum-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --spectrum-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --spectrum-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --spectrum-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --spectrum-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --spectrum-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --spectrum-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --spectrum-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --spectrum-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --spectrum-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --spectrum-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --spectrum-badge-height: var(--spectrum-component-height-100); - --spectrum-badge-font-size: var(--spectrum-font-size-100); - --spectrum-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --spectrum-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); -} - -:host([variant='celery']), -:host([variant='chartreuse']), -:host([variant='orange']), -:host([variant='yellow']) { - --spectrum-badge-label-icon-color: var(--spectrum-black); -} - -:host([variant='blue']), -:host([variant='cyan']), -:host([variant='fuchsia']), -:host([variant='gray']), -:host([variant='green']), -:host([variant='indigo']), -:host([variant='magenta']), -:host([variant='purple']), -:host([variant='red']), -:host([variant='seafoam']) { - --spectrum-badge-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); -} - -:host([size='s']) { - --spectrum-badge-height: var(--spectrum-component-height-75); - --spectrum-badge-font-size: var(--spectrum-font-size-75); - --spectrum-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); - --spectrum-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); -} - -:host([size='l']) { - --spectrum-badge-height: var(--spectrum-component-height-100); - --spectrum-badge-font-size: var(--spectrum-font-size-200); - --spectrum-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); - --spectrum-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); -} - -:host([size='xl']) { - --spectrum-badge-height: var(--spectrum-component-height-100); - --spectrum-badge-font-size: var(--spectrum-font-size-300); - --spectrum-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); - --spectrum-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); -} - @media (forced-colors: active) { :host { border-color: CanvasText; diff --git a/packages/banner/package.json b/packages/banner/package.json index 65a71f9454..e8b23a1201 100644 --- a/packages/banner/package.json +++ b/packages/banner/package.json @@ -29,6 +29,7 @@ "development": "./src/Banner.dev.js", "default": "./src/Banner.js" }, + "./src/banner-overrides.css.js": "./src/banner-overrides.css.js", "./src/banner.css.js": "./src/banner.css.js", "./src/index.js": { "development": "./src/index.dev.js", diff --git a/packages/banner/src/banner-overrides.css b/packages/banner/src/banner-overrides.css new file mode 100644 index 0000000000..0af779f7d4 --- /dev/null +++ b/packages/banner/src/banner-overrides.css @@ -0,0 +1,89 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + border-radius: var( + --spectrum-banner-border-radius, + var(--spectrum-global-dimension-static-size-100) + ); + padding-top: var( + --spectrum-banner-padding-y, + var(--spectrum-global-dimension-static-size-50) + ); + padding-bottom: var( + --spectrum-banner-padding-y, + var(--spectrum-global-dimension-static-size-50) + ); + padding-left: var( + --spectrum-banner-padding-x, + var(--spectrum-global-dimension-static-size-100) + ); + padding-right: var( + --spectrum-banner-padding-x, + var(--spectrum-global-dimension-static-size-100) + ); + font-size: var( + --spectrum-banner-text-size, + var(--spectrum-global-dimension-font-size-75) + ); + line-height: var( + --spectrum-banner-text-line-height, + var(--spectrum-alias-heading-text-line-height) + ); + display: inline-block; +} + +#header { + font-weight: bold; +} + +:host([dir='ltr'][corner]) { + right: -10px; +} + +:host([dir='rtl'][corner]) { + left: -10px; +} + +:host([corner]) { + position: absolute; + top: -10px; +} + +:host { + color: var( + --spectrum-banner-text-color, + var(--spectrum-global-color-static-white) + ); +} + +:host([type='info']) { + background-color: var( + --spectrum-banner-info-background-color, + var(--spectrum-semantic-informative-color-default) + ); +} + +:host([type='warning']) { + background-color: var( + --spectrum-banner-warning-background-color, + var(--spectrum-semantic-notice-color-default) + ); +} + +:host([type='error']) { + background-color: var( + --spectrum-banner-error-background-color, + var(--spectrum-semantic-negative-color-default) + ); +} diff --git a/packages/banner/src/banner.css b/packages/banner/src/banner.css index fb3460145c..21891031cb 100644 --- a/packages/banner/src/banner.css +++ b/packages/banner/src/banner.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-banner.css'); +@import url('./banner-overrides.css'); diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index 70bf645ece..de477397db 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -34,6 +34,7 @@ "default": "./src/Breadcrumbs.js" }, "./src/breadcrumb-item.css.js": "./src/breadcrumb-item.css.js", + "./src/breadcrumbs-overrides.css.js": "./src/breadcrumbs-overrides.css.js", "./src/breadcrumbs.css.js": "./src/breadcrumbs.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -73,7 +74,7 @@ "@spectrum-web-components/menu": "^0.47.2" }, "devDependencies": { - "@spectrum-css/breadcrumb": "^9.1.3" + "@spectrum-css/breadcrumb": "^10.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts index c4d979d04a..63da47bbda 100644 --- a/packages/breadcrumbs/src/BreadcrumbItem.ts +++ b/packages/breadcrumbs/src/BreadcrumbItem.ts @@ -22,6 +22,7 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import styles from './breadcrumb-item.css.js'; @@ -31,7 +32,7 @@ export interface BreadcrumbSelectDetail { export class BreadcrumbItem extends LikeAnchor(Focusable) { public static override get styles(): CSSResultArray { - return [styles, chevronStyles]; + return [styles, chevronStyles, chevronIconOverrides]; } @property() diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/packages/breadcrumbs/src/breadcrumbs-overrides.css new file mode 100644 index 0000000000..f395509fe0 --- /dev/null +++ b/packages/breadcrumbs/src/breadcrumbs-overrides.css @@ -0,0 +1,161 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); + --spectrum-breadcrumbs-block-size-compact: var( + --system-breadcrumbs-block-size-compact + ); + --spectrum-breadcrumbs-block-size-multiline: var( + --system-breadcrumbs-block-size-multiline + ); + --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); + --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); + --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); + --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); + --spectrum-breadcrumbs-font-size-current: var( + --system-breadcrumbs-font-size-current + ); + --spectrum-breadcrumbs-font-family-current: var( + --system-breadcrumbs-font-family-current + ); + --spectrum-breadcrumbs-font-weight-current: var( + --system-breadcrumbs-font-weight-current + ); + --spectrum-breadcrumbs-font-size-compact: var( + --system-breadcrumbs-font-size-compact + ); + --spectrum-breadcrumbs-font-family-compact: var( + --system-breadcrumbs-font-family-compact + ); + --spectrum-breadcrumbs-font-weight-compact: var( + --system-breadcrumbs-font-weight-compact + ); + --spectrum-breadcrumbs-font-size-compact-current: var( + --system-breadcrumbs-font-size-compact-current + ); + --spectrum-breadcrumbs-font-family-compact-current: var( + --system-breadcrumbs-font-family-compact-current + ); + --spectrum-breadcrumbs-font-weight-compact-current: var( + --system-breadcrumbs-font-weight-compact-current + ); + --spectrum-breadcrumbs-font-size-multiline: var( + --system-breadcrumbs-font-size-multiline + ); + --spectrum-breadcrumbs-font-family-multiline: var( + --system-breadcrumbs-font-family-multiline + ); + --spectrum-breadcrumbs-font-weight-multiline: var( + --system-breadcrumbs-font-weight-multiline + ); + --spectrum-breadcrumbs-font-size-multiline-current: var( + --system-breadcrumbs-font-size-multiline-current + ); + --spectrum-breadcrumbs-font-family-multiline-current: var( + --system-breadcrumbs-font-family-multiline-current + ); + --spectrum-breadcrumbs-font-weight-multiline-current: var( + --system-breadcrumbs-font-weight-multiline-current + ); + --spectrum-breadcrumbs-text-decoration-thickness: var( + --system-breadcrumbs-text-decoration-thickness + ); + --spectrum-breadcrumbs-text-decoration-gap: var( + --system-breadcrumbs-text-decoration-gap + ); + --spectrum-breadcrumbs-separator-spacing-inline: var( + --system-breadcrumbs-separator-spacing-inline + ); + --spectrum-breadcrumbs-text-spacing-block-start: var( + --system-breadcrumbs-text-spacing-block-start + ); + --spectrum-breadcrumbs-text-spacing-block-end: var( + --system-breadcrumbs-text-spacing-block-end + ); + --spectrum-breadcrumbs-icon-spacing-block: var( + --system-breadcrumbs-icon-spacing-block + ); + --spectrum-breadcrumbs-text-spacing-block-start-compact: var( + --system-breadcrumbs-text-spacing-block-start-compact + ); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var( + --system-breadcrumbs-text-spacing-block-end-compact + ); + --spectrum-breadcrumbs-icon-spacing-block-compact: var( + --system-breadcrumbs-icon-spacing-block-compact + ); + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( + --system-breadcrumbs-text-spacing-block-start-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( + --system-breadcrumbs-text-spacing-block-end-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( + --system-breadcrumbs-text-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( + --system-breadcrumbs-icon-spacing-block-start-multiline + ); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( + --system-breadcrumbs-icon-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); + --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); + --spectrum-breadcrumbs-action-button-spacing-inline: var( + --system-breadcrumbs-action-button-spacing-inline + ); + --spectrum-breadcrumbs-action-button-spacing-block: var( + --system-breadcrumbs-action-button-spacing-block + ); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var( + --system-breadcrumbs-action-button-spacing-block-compact + ); + --spectrum-breadcrumbs-action-button-spacing-inline-start: var( + --system-breadcrumbs-action-button-spacing-inline-start + ); + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( + --system-breadcrumbs-action-button-spacing-block-multiline + ); + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( + --system-breadcrumbs-action-button-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-focus-indicator-thickness: var( + --system-breadcrumbs-focus-indicator-thickness + ); + --spectrum-breadcrumbs-focus-indicator-gap: var( + --system-breadcrumbs-focus-indicator-gap + ); + --spectrum-breadcrumbs-item-link-border-radius: var( + --system-breadcrumbs-item-link-border-radius + ); + --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); + --spectrum-breadcrumbs-text-color-current: var( + --system-breadcrumbs-text-color-current + ); + --spectrum-breadcrumbs-text-color-disabled: var( + --system-breadcrumbs-text-color-disabled + ); + --spectrum-breadcrumbs-separator-color: var( + --system-breadcrumbs-separator-color + ); + --spectrum-breadcrumbs-action-button-color: var( + --system-breadcrumbs-action-button-color + ); + --spectrum-breadcrumbs-action-button-color-disabled: var( + --system-breadcrumbs-action-button-color-disabled + ); + --spectrum-breadcrumbs-focus-indicator-color: var( + --system-breadcrumbs-focus-indicator-color + ); +} diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/packages/breadcrumbs/src/breadcrumbs.css index c02364b65a..15c7acd07e 100644 --- a/packages/breadcrumbs/src/breadcrumbs.css +++ b/packages/breadcrumbs/src/breadcrumbs.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-breadcrumbs.css'); +@import url('./breadcrumbs-overrides.css'); :host { display: block; diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/packages/breadcrumbs/src/spectrum-breadcrumbs.css index 1ee9d10200..1156522da0 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs.css @@ -11,155 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --spectrum-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --spectrum-breadcrumbs-font-weight-current: var( - --spectrum-bold-font-weight - ); - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --spectrum-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --spectrum-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --spectrum-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --spectrum-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --spectrum-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --spectrum-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --spectrum-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --spectrum-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --spectrum-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --spectrum-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --spectrum-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --spectrum-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --spectrum-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --spectrum-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --spectrum-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --spectrum-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --spectrum-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --spectrum-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --spectrum-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --spectrum-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --spectrum-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --spectrum-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --spectrum-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --spectrum-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); -} - @media (forced-colors: active) { :host { --highcontrast-breadcrumbs-text-color: LinkText; diff --git a/packages/button-group/package.json b/packages/button-group/package.json index 4709daa06f..3f7e7db80f 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -29,6 +29,7 @@ "development": "./src/ButtonGroup.dev.js", "default": "./src/ButtonGroup.js" }, + "./src/button-group-overrides.css.js": "./src/button-group-overrides.css.js", "./src/button-group.css.js": "./src/button-group.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/button": "^0.47.2" }, "devDependencies": { - "@spectrum-css/buttongroup": "^7.1.1" + "@spectrum-css/buttongroup": "^8.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button-group/src/button-group-overrides.css b/packages/button-group/src/button-group-overrides.css new file mode 100644 index 0000000000..2ad1ce7f91 --- /dev/null +++ b/packages/button-group/src/button-group-overrides.css @@ -0,0 +1,57 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-spacing-vertical + ); +} + +:host([size='s']) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-s-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-s-spacing-vertical + ); +} + +:host { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-m-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-m-spacing-vertical + ); +} + +:host([size='l']) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-l-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-l-spacing-vertical + ); +} + +:host([size='xl']) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-xl-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-xl-spacing-vertical + ); +} diff --git a/packages/button-group/src/button-group.css b/packages/button-group/src/button-group.css index 3198ca5f24..6a01c00de4 100644 --- a/packages/button-group/src/button-group.css +++ b/packages/button-group/src/button-group.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-button-group.css'); +@import url('./button-group-overrides.css'); :host([vertical]) ::slotted(sp-action-button) { --spectrum-actionbutton-label-flex-grow: 1; diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css index 260ecd0f05..af5598e9f1 100644 --- a/packages/button-group/src/spectrum-button-group.css +++ b/packages/button-group/src/spectrum-button-group.css @@ -11,28 +11,12 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -:host([size='s']) { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); -} - -:host([size='l']), -:host, -:host([size='xl']) { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - :host { gap: var( --mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal) ); + justify-content: normal; justify-content: var(--mod-buttongroup-justify-content, normal); flex-wrap: wrap; display: flex; diff --git a/packages/button/package.json b/packages/button/package.json index 7da11073b8..5bcca36269 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -46,6 +46,7 @@ "default": "./src/StyledButton.js" }, "./src/button-base.css.js": "./src/button-base.css.js", + "./src/button-overrides.css.js": "./src/button-overrides.css.js", "./src/button.css.js": "./src/button.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -91,7 +92,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/button": "^13.1.1" + "@spectrum-css/button": "^14.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index 50271e7fef..34da4ad5f7 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -24,6 +24,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js'; import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js'; +import crossMediumOverrides from '@spectrum-web-components/icon/src/icon-cross-overrides.css.js'; const crossIcon: Record TemplateResult> = { s: () => html` @@ -62,7 +63,12 @@ export class ClearButton extends SizedMixin(StyledButton, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [...super.styles, buttonStyles, crossMediumStyles]; + return [ + ...super.styles, + buttonStyles, + crossMediumStyles, + crossMediumOverrides, + ]; } /** diff --git a/packages/button/src/CloseButton.ts b/packages/button/src/CloseButton.ts index 88d99f27ee..5d2d47e8e5 100644 --- a/packages/button/src/CloseButton.ts +++ b/packages/button/src/CloseButton.ts @@ -24,6 +24,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js'; import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js'; +import crossMediumOverrides from '@spectrum-web-components/icon/src/icon-cross-overrides.css.js'; import type { ButtonStatics } from './Button.js'; const crossIcon: Record TemplateResult> = { @@ -63,7 +64,12 @@ export class CloseButton extends SizedMixin(StyledButton, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [...super.styles, buttonStyles, crossMediumStyles]; + return [ + ...super.styles, + buttonStyles, + crossMediumStyles, + crossMediumOverrides, + ]; } /** diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css new file mode 100644 index 0000000000..8b770d7ab3 --- /dev/null +++ b/packages/button/src/button-overrides.css @@ -0,0 +1,1128 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-button-animation-duration: var( + --system-button-animation-duration + ); + --spectrum-button-border-radius: var(--system-button-border-radius); + --spectrum-button-border-width: var(--system-button-border-width); + --spectrum-button-line-height: var(--system-button-line-height); + --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); + --spectrum-button-focus-ring-thickness: var( + --system-button-focus-ring-thickness + ); + --spectrum-button-focus-indicator-color: var( + --system-button-focus-indicator-color + ); + --spectrum-button-intended-icon-size: var( + --system-button-intended-icon-size + ); + --spectrum-button-background-color-default: var( + --system-button-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-border-color-hover + ); + --spectrum-button-border-color-down: var(--system-button-border-color-down); + --spectrum-button-border-color-focus: var( + --system-button-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-content-color-disabled + ); +} + +:host([variant='accent']) { + --spectrum-button-background-color-default: var( + --system-button-accent-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-accent-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-accent-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-accent-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-accent-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-accent-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-accent-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-accent-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-accent-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-accent-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-accent-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-accent-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-accent-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-accent-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-accent-content-color-disabled + ); +} + +:host([variant='accent'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-accent-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-accent-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-accent-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-accent-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-accent-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-accent-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-accent-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-accent-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-accent-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-accent-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-accent-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-accent-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-accent-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-accent-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-accent-outline-content-color-disabled + ); +} + +:host([variant='negative']) { + --spectrum-button-background-color-default: var( + --system-button-negative-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-negative-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-negative-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-negative-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-negative-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-negative-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-negative-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-negative-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-negative-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-negative-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-negative-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-negative-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-negative-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-negative-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-negative-content-color-disabled + ); +} + +:host([variant='negative'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-negative-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-negative-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-negative-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-negative-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-negative-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-negative-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-negative-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-negative-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-negative-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-negative-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-negative-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-negative-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-negative-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-negative-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-negative-outline-content-color-disabled + ); +} + +:host([variant='primary']) { + --spectrum-button-background-color-default: var( + --system-button-primary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-primary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-primary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-primary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-primary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-primary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-primary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-primary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-primary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-primary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-primary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-primary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-primary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-primary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-primary-content-color-disabled + ); +} + +:host([variant='primary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-primary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-primary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-primary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-primary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-primary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-primary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-primary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-primary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-primary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-primary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-primary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-primary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-primary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-primary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-primary-outline-content-color-disabled + ); +} + +:host([variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-button-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-secondary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-secondary-content-color-disabled + ); +} + +:host([variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-secondary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-secondary-outline-content-color-disabled + ); +} + +:host([quiet]) { + --spectrum-button-background-color-default: var( + --system-button-quiet-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-quiet-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-quiet-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-quiet-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-quiet-border-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-quiet-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-quiet-border-color-disabled + ); +} + +:host([selected]) { + --spectrum-button-background-color-default: var( + --system-button-selected-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-selected-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-selected-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-selected-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-selected-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-selected-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-selected-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-selected-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-selected-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-selected-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-selected-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-selected-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-selected-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-selected-border-color-disabled + ); +} + +:host([selected][emphasized]) { + --spectrum-button-background-color-default: var( + --system-button-selected-emphasized-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-selected-emphasized-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-selected-emphasized-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-selected-emphasized-background-color-focus + ); +} + +:host([static='black'][quiet]) { + --spectrum-button-border-color-default: var( + --system-button-static-black-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-quiet-border-color-disabled + ); +} + +:host([static='white'][quiet]) { + --spectrum-button-border-color-default: var( + --system-button-static-white-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-quiet-border-color-disabled + ); +} + +:host([static='white']) { + --spectrum-button-background-color-default: var( + --system-button-static-white-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-content-color-disabled + ); +} + +:host([static='white'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-static-white-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-outline-content-color-disabled + ); +} + +:host([static='white'][selected]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-selected-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-selected-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-selected-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-selected-background-color-focus + ); + --spectrum-button-static-white-content-color-default: var( + --system-button-static-white-selected-static-white-content-color-default + ); + --spectrum-button-static-white-content-color-hover: var( + --system-button-static-white-selected-static-white-content-color-hover + ); + --spectrum-button-static-white-content-color-down: var( + --system-button-static-white-selected-static-white-content-color-down + ); + --spectrum-button-static-white-content-color-focus: var( + --system-button-static-white-selected-static-white-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-selected-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-selected-border-color-disabled + ); +} + +:host([static='white'][variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-button-static-white-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-secondary-content-color-disabled + ); +} + +:host([static='white'][variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-static-white-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-secondary-outline-content-color-disabled + ); +} + +:host([static='black']) { + --spectrum-button-background-color-default: var( + --system-button-static-black-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-content-color-disabled + ); +} + +:host([static='black'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-static-black-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-outline-content-color-disabled + ); +} + +:host([static='black'][variant='secondary']) { + --spectrum-button-background-color-default: var( + --system-button-static-black-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-secondary-content-color-disabled + ); +} + +:host([static='black'][variant='secondary'][treatment='outline']) { + --spectrum-button-background-color-default: var( + --system-button-static-black-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-secondary-outline-content-color-disabled + ); +} + +:host([size='s']) { + --spectrum-button-min-width: var(--system-button-size-s-min-width); + --spectrum-button-border-radius: var(--system-button-size-s-border-radius); + --spectrum-button-height: var(--system-button-size-s-height); + --spectrum-button-font-size: var(--system-button-size-s-font-size); + --spectrum-button-edge-to-visual: var( + --system-button-size-s-edge-to-visual + ); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-s-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-s-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); + --spectrum-button-bottom-to-text: var( + --system-button-size-s-bottom-to-text + ); + --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-s-intended-icon-size + ); +} + +:host { + --spectrum-button-min-width: var(--system-button-size-m-min-width); + --spectrum-button-border-radius: var(--system-button-size-m-border-radius); + --spectrum-button-height: var(--system-button-size-m-height); + --spectrum-button-font-size: var(--system-button-size-m-font-size); + --spectrum-button-edge-to-visual: var( + --system-button-size-m-edge-to-visual + ); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-m-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-m-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); + --spectrum-button-bottom-to-text: var( + --system-button-size-m-bottom-to-text + ); + --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-m-intended-icon-size + ); +} + +:host([size='l']) { + --spectrum-button-min-width: var(--system-button-size-l-min-width); + --spectrum-button-border-radius: var(--system-button-size-l-border-radius); + --spectrum-button-height: var(--system-button-size-l-height); + --spectrum-button-font-size: var(--system-button-size-l-font-size); + --spectrum-button-edge-to-visual: var( + --system-button-size-l-edge-to-visual + ); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-l-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-l-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); + --spectrum-button-bottom-to-text: var( + --system-button-size-l-bottom-to-text + ); + --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-l-intended-icon-size + ); +} + +:host([size='xl']) { + --spectrum-button-min-width: var(--system-button-size-xl-min-width); + --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); + --spectrum-button-height: var(--system-button-size-xl-height); + --spectrum-button-font-size: var(--system-button-size-xl-font-size); + --spectrum-button-edge-to-visual: var( + --system-button-size-xl-edge-to-visual + ); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-xl-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-xl-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); + --spectrum-button-bottom-to-text: var( + --system-button-size-xl-bottom-to-text + ); + --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-xl-intended-icon-size + ); +} diff --git a/packages/button/src/button.css b/packages/button/src/button.css index 0470980b0e..5be724e28f 100644 --- a/packages/button/src/button.css +++ b/packages/button/src/button.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-button.css'); +@import url('./button-overrides.css'); @media (forced-colors: active) { :host([treatment][disabled]) { diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 631838b232..af73b1192e 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -23,6 +23,8 @@ governing permissions and limitations under the License. var(--spectrum-sans-font-family-stack) ) ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; line-height: var( --mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)) @@ -67,8 +69,6 @@ governing permissions and limitations under the License. ) ) ease-out; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; justify-content: center; align-items: center; margin: 0; @@ -89,13 +89,7 @@ governing permissions and limitations under the License. :host:after { margin: calc( - var( - --mod-button-focus-indicator-gap, - var( - --mod-focus-indicator-gap, - var(--spectrum-focus-indicator-gap) - ) - ) * -1 + -1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) ); transition: opacity @@ -134,7 +128,6 @@ governing permissions and limitations under the License. } #label { - text-align: center; place-self: center; } @@ -143,164 +136,7 @@ governing permissions and limitations under the License. } :host { - --spectrum-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-button-border-width: var(--spectrum-border-width-200); - --spectrum-button-line-height: 1.2; - --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-button-focus-ring-border-radius: calc( - var(--spectrum-button-border-radius) + - var(--spectrum-button-focus-ring-gap) - ); - --spectrum-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); --mod-progress-circle-position: absolute; -} - -:host([size='s']) { - --spectrum-button-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --spectrum-button-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --spectrum-button-height: var(--spectrum-component-height-75); - --spectrum-button-font-size: var(--spectrum-font-size-75); - --spectrum-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--spectrum-button-border-width) - ); - --spectrum-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --spectrum-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--spectrum-button-border-width) - ); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --spectrum-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); -} - -:host { - --spectrum-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --spectrum-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --spectrum-button-height: var(--spectrum-component-height-100); - --spectrum-button-font-size: var(--spectrum-font-size-100); - --spectrum-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--spectrum-button-border-width) - ); - --spectrum-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --spectrum-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--spectrum-button-border-width) - ); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --spectrum-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-button-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); -} - -:host([size='l']) { - --spectrum-button-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --spectrum-button-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --spectrum-button-height: var(--spectrum-component-height-200); - --spectrum-button-font-size: var(--spectrum-font-size-200); - --spectrum-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--spectrum-button-border-width) - ); - --spectrum-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --spectrum-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--spectrum-button-border-width) - ); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --spectrum-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-button-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); -} - -:host([size='xl']) { - --spectrum-button-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --spectrum-button-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --spectrum-button-height: var(--spectrum-component-height-300); - --spectrum-button-font-size: var(--spectrum-font-size-300); - --spectrum-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--spectrum-button-border-width) - ); - --spectrum-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --spectrum-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--spectrum-button-border-width) - ); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --spectrum-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --spectrum-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --spectrum-button-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); -} - -:host { border-radius: var( --mod-button-border-radius, var(--spectrum-button-border-radius) @@ -315,6 +151,8 @@ governing permissions and limitations under the License. --mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon) ); + max-inline-size: none; + max-inline-size: var(--mod-button-max-inline-size, none); min-inline-size: var( --mod-button-min-width, var(--spectrum-button-min-width) @@ -326,10 +164,11 @@ governing permissions and limitations under the License. var(--spectrum-button-edge-to-text) ); color: inherit; - margin-block: var(--mod-button-margin-block); + margin-block: 0; + margin-block: var(--mod-button-margin-block, 0); border-style: solid; - margin-inline-start: var(--mod-button-margin-left); - margin-inline-end: var(--mod-button-margin-right); + margin-inline-start: var(--mod-button-margin-left, 0); + margin-inline-end: var(--mod-button-margin-right, 0); position: relative; } @@ -341,10 +180,7 @@ governing permissions and limitations under the License. --_icon-size-difference: max( 0px, var(--spectrum-button-intended-icon-size) - - var( - --spectrum-icon-block-size, - var(--spectrum-button-intended-icon-size) - ) + var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)) ); color: inherit; flex-shrink: 0; @@ -366,13 +202,6 @@ governing permissions and limitations under the License. ); } -:host:after { - border-radius: calc( - var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) - ); -} - :host([icon-only]) { min-inline-size: unset; padding: calc( @@ -400,6 +229,7 @@ governing permissions and limitations under the License. --mod-button-line-height, var(--spectrum-button-line-height) ); + text-align: center; text-align: var(--mod-button-text-align, center); align-self: start; padding-block-start: calc( @@ -413,6 +243,7 @@ governing permissions and limitations under the License. } [name='icon'] + #label { + text-align: start; text-align: var(--mod-button-text-align-with-icon, start); } @@ -453,7 +284,16 @@ governing permissions and limitations under the License. ); border-radius: var( --mod-button-focus-ring-border-radius, - var(--spectrum-button-focus-ring-border-radius) + calc( + var( + --mod-button-border-radius, + var(--spectrum-button-border-radius) + ) + + var( + --mod-focus-indicator-gap, + var(--spectrum-focus-indicator-gap) + ) + ) ); transition: box-shadow var( @@ -512,6 +352,10 @@ governing permissions and limitations under the License. var(--spectrum-button-content-color-default) ) ); + transition: + border 0.13s linear, + color 0.13s linear, + background-color 0.13s linear; transition: border var( @@ -639,6 +483,7 @@ governing permissions and limitations under the License. ::slotted([slot='icon']) { visibility: visible; opacity: 1; + transition: opacity 0.13s ease-in-out; transition: opacity var( --mod-button-animation-duration, @@ -650,6 +495,9 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle { visibility: hidden; opacity: 0; + transition: + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; transition: opacity var( @@ -673,6 +521,7 @@ governing permissions and limitations under the License. :host([pending]) .spectrum-ProgressCircle { visibility: visible; opacity: 1; + transition: opacity 0.13s ease-in-out; transition: opacity var( --mod-button-animation-duration, @@ -681,7 +530,12 @@ governing permissions and limitations under the License. ease-in-out; } -:host([static='black']), +.spectrum-Button--noWrap #label { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + :host([static='white']) { --spectrum-button-focus-indicator-color: var( --mod-static-black-focus-indicator-color, @@ -689,8 +543,47 @@ governing permissions and limitations under the License. ); } +:host([static='white'][selected]) { + --spectrum-button-content-color-default: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-default) + ); + --spectrum-button-content-color-hover: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-hover) + ); + --spectrum-button-content-color-down: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-down) + ); + --spectrum-button-content-color-focus: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-focus) + ); +} + +:host([static='black']) { + --spectrum-button-focus-indicator-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); +} + @media (forced-colors: active) { :host { + --highcontrast-button-content-color-default: ButtonText; + --highcontrast-button-content-color-hover: ButtonText; + --highcontrast-button-content-color-focus: ButtonText; + --highcontrast-button-content-color-down: ButtonText; + --highcontrast-button-border-color-default: ButtonBorder; + --highcontrast-button-border-color-hover: ButtonBorder; + --highcontrast-button-border-color-focus: ButtonBorder; + --highcontrast-button-border-color-down: ButtonBorder; + --highcontrast-button-background-color-default: ButtonFace; + --highcontrast-button-background-color-hover: ButtonFace; + --highcontrast-button-background-color-down: ButtonFace; + --highcontrast-button-background-color-focus: ButtonFace; + --highcontrast-button-background-color-disabled: ButtonFace; --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; --mod-progress-circle-track-border-color: ButtonText; @@ -698,6 +591,11 @@ governing permissions and limitations under the License. --mod-progress-circle-thickness: var( --spectrum-progress-circle-thickness-medium ); + --mod-button-animation-duration: 0s; + } + + #label { + forced-color-adjust: none; } :host(:focus-visible):after { @@ -713,1022 +611,16 @@ governing permissions and limitations under the License. :host([variant='accent'][treatment='fill']) { --highcontrast-button-background-color-default: ButtonText; --highcontrast-button-content-color-default: ButtonFace; + --highcontrast-button-content-color-hover: HighlightText; + --highcontrast-button-content-color-down: HighlightText; + --highcontrast-button-content-color-focus: HighlightText; --highcontrast-button-background-color-disabled: ButtonFace; --highcontrast-button-background-color-hover: Highlight; --highcontrast-button-background-color-down: Highlight; --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-content-color-hover: ButtonFace; - --highcontrast-button-content-color-down: ButtonFace; - --highcontrast-button-content-color-focus: ButtonFace; - } - - :host([variant='accent'][treatment='fill']) #label { - forced-color-adjust: none; + --highcontrast-button-border-color-default: ButtonText; + --highcontrast-button-border-color-hover: Highlight; + --highcontrast-button-border-color-focus: Highlight; + --highcontrast-button-border-color-down: Highlight; } } - -:host { - --spectrum-button-background-color-default: var( - --system-spectrum-button-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-content-color-disabled - ); -} - -:host([variant='accent']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-accent-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-accent-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-accent-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-accent-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-accent-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-accent-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-accent-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-accent-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-accent-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-accent-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-accent-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-accent-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-accent-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-accent-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-accent-content-color-disabled - ); -} - -:host([variant='accent'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-accent-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-accent-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-accent-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-accent-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-accent-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-accent-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-accent-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-accent-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-accent-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-accent-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-accent-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-accent-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-accent-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-accent-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-accent-outline-content-color-disabled - ); -} - -:host([variant='negative']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-negative-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-negative-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-negative-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-negative-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-negative-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-negative-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-negative-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-negative-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-negative-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-negative-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-negative-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-negative-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-negative-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-negative-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-negative-content-color-disabled - ); -} - -:host([variant='negative'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-negative-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-negative-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-negative-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-negative-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-negative-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-negative-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-negative-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-negative-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-negative-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-negative-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-negative-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-negative-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-negative-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-negative-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-negative-outline-content-color-disabled - ); -} - -:host([variant='primary']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-primary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-primary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-primary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-primary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-primary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-primary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-primary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-primary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-primary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-primary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-primary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-primary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-primary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-primary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-primary-content-color-disabled - ); -} - -:host([variant='primary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-primary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-primary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-primary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-primary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-primary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-primary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-primary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-primary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-primary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-primary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-primary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-primary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-primary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-primary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-primary-outline-content-color-disabled - ); -} - -:host([variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-secondary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-secondary-content-color-disabled - ); -} - -:host([variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-secondary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-secondary-outline-content-color-disabled - ); -} - -:host([quiet]) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-quiet-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-quiet-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-quiet-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-quiet-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-quiet-border-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-quiet-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-quiet-border-color-disabled - ); -} - -:host([selected]) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-selected-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-selected-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-selected-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-selected-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-selected-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-selected-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-selected-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-selected-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-selected-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-selected-border-color-disabled - ); -} - -:host([selected][emphasized]) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-selected-emphasized-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-selected-emphasized-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-selected-emphasized-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-selected-emphasized-background-color-focus - ); -} - -:host([static='black'][quiet]) { - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticblack-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticblack-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticblack-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticblack-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticblack-quiet-border-color-disabled - ); -} - -:host([static='white'][quiet]) { - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticwhite-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticwhite-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticwhite-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticwhite-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-quiet-border-color-disabled - ); -} - -:host([static='white']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticwhite-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticwhite-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticwhite-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticwhite-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticwhite-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticwhite-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticwhite-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticwhite-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticwhite-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticwhite-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticwhite-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticwhite-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticwhite-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticwhite-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticwhite-content-color-disabled - ); -} - -:host([static='white'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticwhite-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticwhite-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticwhite-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticwhite-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticwhite-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticwhite-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticwhite-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticwhite-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticwhite-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticwhite-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticwhite-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticwhite-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticwhite-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticwhite-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticwhite-outline-content-color-disabled - ); -} - -:host([static='white'][selected]) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticwhite-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticwhite-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticwhite-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticwhite-selected-background-color-focus - ); - --spectrum-button-content-color-default: var( - --mod-button-static-content-color, - var(--system-spectrum-button-staticwhite-selected-content-color-default) - ); - --spectrum-button-content-color-hover: var( - --mod-button-static-content-color, - var(--system-spectrum-button-staticwhite-selected-content-color-hover) - ); - --spectrum-button-content-color-down: var( - --mod-button-static-content-color, - var(--system-spectrum-button-staticwhite-selected-content-color-down) - ); - --spectrum-button-content-color-focus: var( - --mod-button-static-content-color, - var(--system-spectrum-button-staticwhite-selected-content-color-focus) - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticwhite-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-selected-border-color-disabled - ); -} - -:host([static='white'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticwhite-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticwhite-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticwhite-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticwhite-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticwhite-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticwhite-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticwhite-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticwhite-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticwhite-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticwhite-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticwhite-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticwhite-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticwhite-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-content-color-disabled - ); -} - -:host([static='white'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticwhite-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticwhite-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticwhite-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticwhite-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticwhite-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticwhite-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticwhite-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticwhite-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticwhite-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticwhite-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticwhite-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticwhite-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled - ); -} - -:host([static='black']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticblack-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticblack-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticblack-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticblack-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticblack-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticblack-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticblack-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticblack-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticblack-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticblack-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticblack-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticblack-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticblack-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticblack-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticblack-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticblack-content-color-disabled - ); -} - -:host([static='black'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticblack-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticblack-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticblack-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticblack-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticblack-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticblack-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticblack-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticblack-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticblack-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticblack-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticblack-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticblack-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticblack-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticblack-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticblack-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticblack-outline-content-color-disabled - ); -} - -:host([static='black'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticblack-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticblack-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticblack-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticblack-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticblack-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticblack-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticblack-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticblack-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticblack-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticblack-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticblack-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticblack-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticblack-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticblack-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticblack-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticblack-secondary-content-color-disabled - ); -} - -:host([static='black'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-spectrum-button-staticblack-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-spectrum-button-staticblack-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-spectrum-button-staticblack-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-spectrum-button-staticblack-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-spectrum-button-staticblack-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-spectrum-button-staticblack-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-spectrum-button-staticblack-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-spectrum-button-staticblack-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-spectrum-button-staticblack-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-spectrum-button-staticblack-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-spectrum-button-staticblack-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-spectrum-button-staticblack-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-spectrum-button-staticblack-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-spectrum-button-staticblack-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-spectrum-button-staticblack-secondary-outline-content-color-disabled - ); -} diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js index e2a27c8cc6..531a42127d 100644 --- a/packages/button/src/spectrum-config.js +++ b/packages/button/src/spectrum-config.js @@ -27,6 +27,7 @@ const config = { inPackage: '@spectrum-css/button', outPackage: 'button', fileName: 'button', + systemOverrides: true, excludeByComponents: [ builder.element('a'), { diff --git a/packages/card/package.json b/packages/card/package.json index 08cfcbb913..ab83ef602d 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -29,6 +29,7 @@ "development": "./src/Card.dev.js", "default": "./src/Card.js" }, + "./src/card-overrides.css.js": "./src/card-overrides.css.js", "./src/card.css.js": "./src/card.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -67,7 +68,7 @@ "@spectrum-web-components/styles": "^0.47.2" }, "devDependencies": { - "@spectrum-css/card": "^8.1.1" + "@spectrum-css/card": "^10.0.0-s2-foundations.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css new file mode 100644 index 0000000000..990a1136f2 --- /dev/null +++ b/packages/card/src/card-overrides.css @@ -0,0 +1,101 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-card-background-color: var(--system-card-background-color); + --spectrum-card-body-spacing: var(--system-card-body-spacing); + --spectrum-card-title-padding-top: var(--system-card-title-padding-top); + --spectrum-card-title-padding-right: var(--system-card-title-padding-right); + --spectrum-card-content-margin-top: var(--system-card-content-margin-top); + --spectrum-card-content-margin-bottom: var( + --system-card-content-margin-bottom + ); + --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); + --spectrum-card-subtitle-padding-right: var( + --system-card-subtitle-padding-right + ); + --spectrum-card-border-width: var(--system-card-border-width); + --spectrum-card-corner-radius: var(--system-card-corner-radius); + --spectrum-card-border-color: var(--system-card-border-color); + --spectrum-card-border-color-hover: var(--system-card-border-color-hover); + --spectrum-card-border-color-selected: var( + --system-card-border-color-selected + ); + --spectrum-card-divider-color: var(--system-card-divider-color); + --spectrum-card-title-font-family: var(--system-card-title-font-family); + --spectrum-card-title-font-size: var(--system-card-title-font-size); + --spectrum-card-title-font-weight: var(--system-card-title-font-weight); + --spectrum-card-title-font-style: var(--system-card-title-font-style); + --spectrum-card-title-line-height: var(--system-card-title-line-height); + --spectrum-card-title-font-color: var(--system-card-title-font-color); + --spectrum-card-body-font-family: var(--system-card-body-font-family); + --spectrum-card-body-font-size: var(--system-card-body-font-size); + --spectrum-card-body-font-weight: var(--system-card-body-font-weight); + --spectrum-card-body-font-style: var(--system-card-body-font-style); + --spectrum-card-body-line-height: var(--system-card-body-line-height); + --spectrum-card-body-font-color: var(--system-card-body-font-color); + --spectrum-card-actions-spacing: var(--system-card-actions-spacing); + --spectrum-card-actions-size: var(--system-card-actions-size); + --spectrum-card-actions-border-radius: var( + --system-card-actions-border-radius + ); + --spectrum-card-actions-background-color-rgb: var( + --system-card-actions-background-color-rgb + ); + --spectrum-card-actions-background-color-opacity: var( + --system-card-actions-background-color-opacity + ); + --spectrum-card-actions-drop-shadow-color: var( + --system-card-actions-drop-shadow-color + ); + --spectrum-card-actions-drop-shadow-x: var( + --system-card-actions-drop-shadow-x + ); + --spectrum-card-actions-drop-shadow-y: var( + --system-card-actions-drop-shadow-y + ); + --spectrum-card-actions-drop-shadow-blur: var( + --system-card-actions-drop-shadow-blur + ); + --spectrum-card-focus-indicator-color: var( + --system-card-focus-indicator-color + ); + --spectrum-card-focus-indicator-width: var( + --system-card-focus-indicator-width + ); + --spectrum-card-selected-background-opacity: var( + --system-card-selected-background-opacity + ); + --spectrum-card-preview-border-width-selected: var( + --system-card-preview-border-width-selected + ); + --spectrum-card-preview-background-color: var( + --system-card-preview-background-color + ); + --spectrum-card-preview-background-color-hover: var( + --system-card-preview-background-color-hover + ); + --spectrum-card-horizontal-body-padding: var( + --system-card-horizontal-body-padding + ); + --spectrum-card-horizontal-preview-padding: var( + --system-card-horizontal-preview-padding + ); + --spectrum-card-content-margin-top-quiet: var( + --system-card-content-margin-top-quiet + ); + --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); + --spectrum-card-selected-background-color-rgb: var( + --system-card-selected-background-color-rgb + ); +} diff --git a/packages/card/src/card.css b/packages/card/src/card.css index 666f4facd2..1490636486 100644 --- a/packages/card/src/card.css +++ b/packages/card/src/card.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-card.css'); +@import url('./card-overrides.css'); :host([href]:not([href=''])) { cursor: pointer; diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 1d4eecb9b4..55a4371485 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -11,84 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-card-background-color: var(--spectrum-background-layer-2-color); - --spectrum-card-body-spacing: var(--spectrum-spacing-400); - --spectrum-card-title-padding-top: var(--spectrum-spacing-300); - --spectrum-card-title-padding-right: var(--spectrum-spacing-400); - --spectrum-card-content-margin-top: var(--spectrum-spacing-100); - --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300); - --spectrum-card-footer-padding-top: var(--spectrum-spacing-100); - --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100); - --spectrum-card-border-width: var(--spectrum-border-width-100); - --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-300); - --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --spectrum-card-title-line-height: var(--spectrum-heading-line-height); - --spectrum-card-title-font-color: var(--spectrum-heading-color); - --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-body-font-size: var(--spectrum-body-size-s); - --spectrum-card-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-card-body-line-height: var(--spectrum-body-line-height); - --spectrum-card-body-font-color: var(--spectrum-body-color); - --spectrum-card-actions-spacing: var(--spectrum-spacing-300); - --spectrum-card-actions-size: var( - --spectrum-card-selection-background-size - ); - --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100); - --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --spectrum-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --spectrum-card-actions-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-card-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-card-selected-background-opacity: 0.1; - --spectrum-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --spectrum-card-preview-background-color: var( - --spectrum-background-base-color - ); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); - --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); -} - -:host([variant='gallery']), -:host([variant='quiet']) { - --mod-card-content-margin-top: var( - --mod-card-content-margin-top-quiet, - var(--spectrum-spacing-100) - ); - --mod-card-minimum-width: var( - --mod-card-minimum-width-quiet, - var(--spectrum-card-minimum-width) - ); -} - :host { box-sizing: border-box; min-inline-size: var( @@ -107,13 +29,7 @@ governing permissions and limitations under the License. ); background-color: var( --highcontrast-card-background-color, - var( - --mod-card-background-color, - var( - --mod-spectrum-card-background-color, - var(--spectrum-card-background-color) - ) - ) + var(--mod-card-background-color, var(--spectrum-card-background-color)) ); flex-direction: column; -webkit-text-decoration: none; @@ -283,6 +199,33 @@ governing permissions and limitations under the License. var(--spectrum-card-actions-background-color-opacity) ) ); + pointer-events: auto; + box-sizing: border-box; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); + justify-content: center; + align-items: center; + display: inline-flex; position: absolute; inset-block-start: calc( var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - @@ -314,8 +257,8 @@ governing permissions and limitations under the License. background-position: 50%; background-size: cover; background-color: var( - --mod-card-background-color, - var(--spectrum-card-background-color) + --mod-card-preview-background-color, + var(--spectrum-card-preview-background-color) ); border-block-end-color: var( --mod-card-border-color, @@ -530,13 +473,13 @@ governing permissions and limitations under the License. } .header { + justify-content: space-between; align-items: center; display: flex; } .action-button { z-index: 1; - flex: 1; justify-content: flex-end; align-self: center; display: flex; @@ -583,6 +526,14 @@ governing permissions and limitations under the License. :host([variant='gallery']), :host([variant='quiet']) { + --spectrum-card-content-margin-top: var( + --mod-card-content-margin-top-quiet, + var(--spectrum-card-content-margin-top-quiet) + ); + --spectrum-card-minimum-width: var( + --mod-card-minimum-width-quiet, + var(--spectrum-card-minimum-width-quiet) + ); block-size: 100%; min-inline-size: var( --mod-card-minimum-width, @@ -633,7 +584,9 @@ governing permissions and limitations under the License. overflow: visible; } +:host([variant='gallery']) #preview:after, :host([variant='gallery']) #preview:before, +:host([variant='quiet']) #preview:after, :host([variant='quiet']) #preview:before { content: ''; block-size: 100%; @@ -645,9 +598,6 @@ governing permissions and limitations under the License. :host([variant='gallery']) #preview:after, :host([variant='quiet']) #preview:after { - content: ''; - block-size: 100%; - inline-size: 100%; border-radius: calc( var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + var( @@ -668,9 +618,7 @@ governing permissions and limitations under the License. var(--spectrum-card-focus-indicator-width) ) * -1 ); - position: absolute; - inset-block-start: 0; - inset-inline: 0; + inset-inline-end: 0; } :host([variant='gallery'][drop-target]), diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index bd276d0eca..fa22982251 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -37,6 +37,7 @@ "development": "./src/CheckboxMixin.dev.js", "default": "./src/CheckboxMixin.js" }, + "./src/checkbox-overrides.css.js": "./src/checkbox-overrides.css.js", "./src/checkbox.css.js": "./src/checkbox.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -71,7 +72,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/checkbox": "^9.1.1" + "@spectrum-css/checkbox": "^10.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts index f024d3a22d..0ac6453b06 100644 --- a/packages/checkbox/src/Checkbox.ts +++ b/packages/checkbox/src/Checkbox.ts @@ -31,7 +31,9 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js'; import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js'; +import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js'; import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js'; +import dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.css.js'; const checkmarkIcon = { s: () => { @@ -144,7 +146,13 @@ export class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), { } public static override get styles(): CSSResultArray { - return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles]; + return [ + checkboxStyles, + checkmarkSmallStyles, + dashSmallStyles, + checkmarkSmallOverrides, + dashSmallOverrides, + ]; } public override click(): void { diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css new file mode 100644 index 0000000000..c41cf125f9 --- /dev/null +++ b/packages/checkbox/src/checkbox-overrides.css @@ -0,0 +1,153 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-checkbox-control-color-default: var( + --system-checkbox-control-color-default + ); + --spectrum-checkbox-control-color-hover: var( + --system-checkbox-control-color-hover + ); + --spectrum-checkbox-control-color-down: var( + --system-checkbox-control-color-down + ); + --spectrum-checkbox-control-color-focus: var( + --system-checkbox-control-color-focus + ); + --spectrum-checkbox-content-color-default: var( + --system-checkbox-content-color-default + ); + --spectrum-checkbox-content-color-hover: var( + --system-checkbox-content-color-hover + ); + --spectrum-checkbox-content-color-down: var( + --system-checkbox-content-color-down + ); + --spectrum-checkbox-content-color-focus: var( + --system-checkbox-content-color-focus + ); + --spectrum-checkbox-focus-indicator-color: var( + --system-checkbox-focus-indicator-color + ); + --spectrum-checkbox-content-color-disabled: var( + --system-checkbox-content-color-disabled + ); + --spectrum-checkbox-control-color-disabled: var( + --system-checkbox-control-color-disabled + ); + --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); + --spectrum-checkbox-invalid-color-default: var( + --system-checkbox-invalid-color-default + ); + --spectrum-checkbox-invalid-color-hover: var( + --system-checkbox-invalid-color-hover + ); + --spectrum-checkbox-invalid-color-down: var( + --system-checkbox-invalid-color-down + ); + --spectrum-checkbox-invalid-color-focus: var( + --system-checkbox-invalid-color-focus + ); + --spectrum-checkbox-emphasized-color-default: var( + --system-checkbox-emphasized-color-default + ); + --spectrum-checkbox-emphasized-color-hover: var( + --system-checkbox-emphasized-color-hover + ); + --spectrum-checkbox-emphasized-color-down: var( + --system-checkbox-emphasized-color-down + ); + --spectrum-checkbox-emphasized-color-focus: var( + --system-checkbox-emphasized-color-focus + ); + --spectrum-checkbox-control-selected-color-default: var( + --system-checkbox-control-selected-color-default + ); + --spectrum-checkbox-control-selected-color-hover: var( + --system-checkbox-control-selected-color-hover + ); + --spectrum-checkbox-control-selected-color-down: var( + --system-checkbox-control-selected-color-down + ); + --spectrum-checkbox-control-selected-color-focus: var( + --system-checkbox-control-selected-color-focus + ); + --spectrum-checkbox-line-height: var(--system-checkbox-line-height); + --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); + --spectrum-checkbox-control-corner-radius: var( + --system-checkbox-control-corner-radius + ); + --spectrum-checkbox-focus-indicator-gap: var( + --system-checkbox-focus-indicator-gap + ); + --spectrum-checkbox-focus-indicator-thickness: var( + --system-checkbox-focus-indicator-thickness + ); + --spectrum-checkbox-border-width: var(--system-checkbox-border-width); + --spectrum-checkbox-animation-duration: var( + --system-checkbox-animation-duration + ); + --spectrum-checkbox-font-size: var(--system-checkbox-font-size); + --spectrum-checkbox-height: var(--system-checkbox-height); + --spectrum-checkbox-control-size: var(--system-checkbox-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); +} + +:host([size='s']) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-s-height); + --spectrum-checkbox-control-size: var( + --system-checkbox-size-s-control-size + ); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-s-text-to-control + ); +} + +:host { + --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-m-height); + --spectrum-checkbox-control-size: var( + --system-checkbox-size-m-control-size + ); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-m-text-to-control + ); +} + +:host([size='l']) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-l-height); + --spectrum-checkbox-control-size: var( + --system-checkbox-size-l-control-size + ); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-l-text-to-control + ); +} + +:host([size='xl']) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); + --spectrum-checkbox-control-size: var( + --system-checkbox-size-xl-control-size + ); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-xl-text-to-control + ); +} diff --git a/packages/checkbox/src/checkbox.css b/packages/checkbox/src/checkbox.css index 20211c2bd3..f3023fb21e 100644 --- a/packages/checkbox/src/checkbox.css +++ b/packages/checkbox/src/checkbox.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-checkbox.css'); +@import url('./checkbox-overrides.css'); :host { display: inline-flex; diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index 03a7b38fbe..db48f2080f 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -11,128 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - --spectrum-checkbox-invalid-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-checkbox-invalid-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --spectrum-checkbox-invalid-color-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-checkbox-emphasized-color-hover: var( - --spectrum-accent-color-1000 - ); - --spectrum-checkbox-emphasized-color-down: var( - --spectrum-accent-color-1100 - ); - --spectrum-checkbox-emphasized-color-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --spectrum-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --spectrum-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-line-height: var(--spectrum-line-height-100); - --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --spectrum-checkbox-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-checkbox-border-width: var(--spectrum-border-width-200); - --spectrum-checkbox-selected-border-width: calc( - var(--spectrum-checkbox-control-size) / 2 - ); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - -:host([size='s']) { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var( - --spectrum-checkbox-control-size-small - ); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); -} - -:host { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); -} - -:host([size='l']) { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var( - --spectrum-checkbox-control-size-large - ); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); -} - -:host([size='xl']) { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); -} - :host { color: var( --highcontrast-checkbox-content-color-default, @@ -643,6 +521,9 @@ governing permissions and limitations under the License. var(--spectrum-checkbox-control-size) ) ); + --spectrum-checkbox-selected-border-width: calc( + var(--spectrum-checkbox-control-size) / 2 + ); margin: calc( var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2 ) @@ -853,18 +734,3 @@ governing permissions and limitations under the License. --highcontrast-checkbox-focus-indicator-color: CanvasText; } } - -:host { - --spectrum-checkbox-control-color-default: var( - --system-spectrum-checkbox-control-color-default - ); - --spectrum-checkbox-control-color-hover: var( - --system-spectrum-checkbox-control-color-hover - ); - --spectrum-checkbox-control-color-down: var( - --system-spectrum-checkbox-control-color-down - ); - --spectrum-checkbox-control-color-focus: var( - --system-spectrum-checkbox-control-color-focus - ); -} diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index c2a64814c7..c88457c6f0 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -22,6 +22,7 @@ "exports": { ".": "./src/clear-button.css.js", "./package.json": "./package.json", + "./src/clear-button-overrides.css.js": "./src/clear-button-overrides.css.js", "./src/clear-button.css.js": "./src/clear-button.css.js" }, "scripts": { @@ -45,7 +46,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/clearbutton": "^6.1.0" + "@spectrum-css/clearbutton": "^7.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css new file mode 100644 index 0000000000..1b58871627 --- /dev/null +++ b/packages/clear-button/src/clear-button-overrides.css @@ -0,0 +1,113 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-clear-button-background-color: var( + --system-clear-button-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-background-color-key-focus + ); + --spectrum-clear-button-height: var(--system-clear-button-height); + --spectrum-clear-button-width: var(--system-clear-button-width); + --spectrum-clear-button-padding: var(--system-clear-button-padding); + --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-icon-color-down + ); + --spectrum-clear-button-icon-color-key-focus: var( + --system-clear-button-icon-color-key-focus + ); +} + +:host([size='s']) { + --spectrum-clear-button-height: var(--system-clear-button-size-s-height); + --spectrum-clear-button-width: var(--system-clear-button-size-s-width); +} + +:host([size='l']) { + --spectrum-clear-button-height: var(--system-clear-button-size-l-height); + --spectrum-clear-button-width: var(--system-clear-button-size-l-width); +} + +:host([size='xl']) { + --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); + --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); +} + +:host .spectrum-ClearButton--quiet { + --spectrum-clear-button-background-color: var( + --system-clear-button-quiet-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-quiet-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-quiet-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-quiet-background-color-key-focus + ); +} + +:host([variant='overBackground']) { + --spectrum-clear-button-icon-color: var( + --system-clear-button-over-background-icon-color + ); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-over-background-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-over-background-icon-color-down + ); + --spectrum-clear-button-icon-color-key-focus: var( + --system-clear-button-over-background-icon-color-key-focus + ); + --spectrum-clear-button-background-color: var( + --system-clear-button-over-background-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-over-background-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-over-background-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-over-background-background-color-key-focus + ); +} + +:host([disabled]), +:host([disabled]) { + --spectrum-clear-button-icon-color: var( + --system-clear-button-disabled-icon-color + ); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-disabled-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-disabled-icon-color-down + ); + --spectrum-clear-button-background-color: var( + --system-clear-button-disabled-background-color + ); +} diff --git a/packages/clear-button/src/clear-button.css b/packages/clear-button/src/clear-button.css index 9a1b65a611..fccd5eb4fd 100644 --- a/packages/clear-button/src/clear-button.css +++ b/packages/clear-button/src/clear-button.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-clear-button.css'); +@import url('./clear-button-overrides.css'); diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index f52d830966..3eab7a51c9 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -11,115 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-clear-button-height: var(--spectrum-component-height-100); - --spectrum-clear-button-width: var(--spectrum-component-height-100); - --spectrum-clear-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --spectrum-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); -} - -:host([size='s']) { - --spectrum-clear-button-height: var(--spectrum-component-height-75); - --spectrum-clear-button-width: var(--spectrum-component-height-75); -} - -:host([size='l']) { - --spectrum-clear-button-height: var(--spectrum-component-height-200); - --spectrum-clear-button-width: var(--spectrum-component-height-200); -} - -:host([size='xl']) { - --spectrum-clear-button-height: var(--spectrum-component-height-300); - --spectrum-clear-button-width: var(--spectrum-component-height-300); -} - -:host .spectrum-ClearButton--quiet { - --mod-clear-button-background-color: var( - --spectrum-clear-button-background-color-quiet, - transparent - ); - --mod-clear-button-background-color-hover: var( - --spectrum-clear-button-background-color-hover-quiet, - transparent - ); - --mod-clear-button-background-color-down: var( - --spectrum-clear-button-background-color-down-quiet, - transparent - ); - --mod-clear-button-background-color-key-focus: var( - --spectrum-clear-button-background-color-key-focus-quiet, - transparent - ); -} - -:host([variant='overBackground']) { - --mod-clear-button-icon-color: var( - --spectrum-clear-button-icon-color-over-background, - var(--spectrum-white) - ); - --mod-clear-button-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-over-background, - var(--spectrum-white) - ); - --mod-clear-button-icon-color-down: var( - --spectrum-clear-button-icon-color-down-over-background, - var(--spectrum-white) - ); - --mod-clear-button-icon-color-key-focus: var( - --spectrum-clear-button-icon-color-key-focus-over-background, - var(--spectrum-white) - ); - --mod-clear-button-background-color: var( - --spectrum-clear-button-background-color-over-background, - transparent - ); - --mod-clear-button-background-color-hover: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); - --mod-clear-button-background-color-down: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-400) - ); - --mod-clear-button-background-color-key-focus: var( - --spectrum-clear-button-background-color-hover-over-background, - var(--spectrum-transparent-white-300) - ); -} - -:host([disabled]), -:host([disabled]) { - --mod-clear-button-icon-color: var( - --mod-clear-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-clear-button-icon-color-hover: var( - --spectrum-clear-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-clear-button-icon-color-down: var( - --spectrum-clear-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-clear-button-background-color: var( - --mod-clear-button-background-color-disabled, - transparent - ); -} - :host { block-size: var( --mod-clear-button-height, @@ -130,6 +21,7 @@ governing permissions and limitations under the License. var(--spectrum-clear-button-width) ); cursor: pointer; + background-color: initial; background-color: var(--mod-clear-button-background-color, transparent); padding: var( --mod-clear-button-padding, @@ -202,6 +94,18 @@ governing permissions and limitations under the License. ); } +:host([disabled]), +:host([disabled]) { + --spectrum-clear-button-icon-color: var( + --mod-clear-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-clear-button-background-color: var( + --mod-clear-button-background-color-disabled, + transparent + ); +} + .fill { background-color: var( --mod-clear-button-background-color, @@ -224,18 +128,3 @@ governing permissions and limitations under the License. --highcontrast-clear-button-icon-color-hover: Highlight; } } - -:host { - --spectrum-clear-button-background-color: var( - --system-spectrum-clearbutton-spectrum-clear-button-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-spectrum-clearbutton-spectrum-clear-button-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-spectrum-clearbutton-spectrum-clear-button-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus - ); -} diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 217f907306..69915d89a5 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -22,6 +22,7 @@ "exports": { ".": "./src/close-button.css.js", "./package.json": "./package.json", + "./src/close-button-overrides.css.js": "./src/close-button-overrides.css.js", "./src/close-button.css.js": "./src/close-button.css.js" }, "scripts": { @@ -45,7 +46,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/closebutton": "^5.1.0" + "@spectrum-css/closebutton": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css new file mode 100644 index 0000000000..b5160d6619 --- /dev/null +++ b/packages/close-button/src/close-button-overrides.css @@ -0,0 +1,119 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-closebutton-background-color-default: var( + --system-close-button-background-color-default + ); + --spectrum-closebutton-background-color-hover: var( + --system-close-button-background-color-hover + ); + --spectrum-closebutton-background-color-down: var( + --system-close-button-background-color-down + ); + --spectrum-closebutton-background-color-focus: var( + --system-close-button-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-icon-color-default + ); + --spectrum-closebutton-icon-color-hover: var( + --system-close-button-icon-color-hover + ); + --spectrum-closebutton-icon-color-down: var( + --system-close-button-icon-color-down + ); + --spectrum-closebutton-icon-color-focus: var( + --system-close-button-icon-color-focus + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-thickness: var( + --system-close-button-focus-indicator-thickness + ); + --spectrum-closebutton-focus-indicator-gap: var( + --system-close-button-focus-indicator-gap + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-focus-indicator-color + ); + --spectrum-closebutton-animation-duration: var( + --system-close-button-animation-duration + ); + --spectrum-closebutton-size: var(--system-close-button-size); +} + +:host([size='s']) { + --spectrum-closebutton-size: var(--system-close-button-size-s-size); +} + +:host { + --spectrum-closebutton-size: var(--system-close-button-size-m-size); +} + +:host([size='l']) { + --spectrum-closebutton-size: var(--system-close-button-size-l-size); +} + +:host([size='xl']) { + --spectrum-closebutton-size: var(--system-close-button-size-xl-size); +} + +:host([static='white']) { + --spectrum-closebutton-static-background-color-default: var( + --system-close-button-static-white-static-background-color-default + ); + --spectrum-closebutton-static-background-color-hover: var( + --system-close-button-static-white-static-background-color-hover + ); + --spectrum-closebutton-static-background-color-down: var( + --system-close-button-static-white-static-background-color-down + ); + --spectrum-closebutton-static-background-color-focus: var( + --system-close-button-static-white-static-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-static-white-icon-color-default + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-static-white-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-static-white-focus-indicator-color + ); +} + +:host([static='black']) { + --spectrum-closebutton-static-background-color-default: var( + --system-close-button-static-black-static-background-color-default + ); + --spectrum-closebutton-static-background-color-hover: var( + --system-close-button-static-black-static-background-color-hover + ); + --spectrum-closebutton-static-background-color-down: var( + --system-close-button-static-black-static-background-color-down + ); + --spectrum-closebutton-static-background-color-focus: var( + --system-close-button-static-black-static-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-static-black-icon-color-default + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-static-black-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-static-black-focus-indicator-color + ); +} diff --git a/packages/close-button/src/close-button.css b/packages/close-button/src/close-button.css index b10429a4fe..9c9bbc78c6 100644 --- a/packages/close-button/src/close-button.css +++ b/packages/close-button/src/close-button.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-close-button.css'); +@import url('./close-button-overrides.css'); diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index e2fd6a65fb..0416b45761 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -23,6 +23,8 @@ governing permissions and limitations under the License. var(--spectrum-sans-font-family-stack) ) ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; line-height: var( --mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)) @@ -67,8 +69,6 @@ governing permissions and limitations under the License. ) ) ease-out; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; border-style: solid; margin: 0; -webkit-text-decoration: none; @@ -91,112 +91,6 @@ governing permissions and limitations under the License. -webkit-appearance: none; } -:host { - --spectrum-closebutton-size-300: 24px; - --spectrum-closebutton-size-400: 32px; - --spectrum-closebutton-size-500: 40px; - --spectrum-closebutton-size-600: 48px; - --spectrum-closebutton-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-closebutton-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-closebutton-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-closebutton-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-closebutton-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-closebutton-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-closebutton-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-closebutton-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - -:host([size='s']) { - --spectrum-closebutton-height: var(--spectrum-component-height-75); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-300); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300); -} - -:host { - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); -} - -:host([size='l']) { - --spectrum-closebutton-height: var(--spectrum-component-height-200); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-500); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500); -} - -:host([size='xl']) { - --spectrum-closebutton-height: var(--spectrum-component-height-300); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-600); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600); -} - -:host([static='white']) { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --spectrum-closebutton-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --spectrum-closebutton-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --spectrum-closebutton-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --spectrum-closebutton-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); -} - -:host([static='black']) { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --spectrum-closebutton-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --spectrum-closebutton-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --spectrum-closebutton-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); -} - @media (forced-colors: active) { :host { --highcontrast-closebutton-icon-color-disabled: GrayText; @@ -242,18 +136,12 @@ governing permissions and limitations under the License. } :host { - block-size: var( - --mod-closebutton-height, - var(--spectrum-closebutton-height) - ); - inline-size: var( - --mod-closebutton-width, - var(--spectrum-closebutton-width) - ); + block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); color: inherit; border-radius: var( --mod-closebutton-border-radius, - var(--spectrum-closebutton-border-radius) + var(--spectrum-closebutton-size) ); transition: border-color var( @@ -528,18 +416,3 @@ governing permissions and limitations under the License. .icon { margin: 0; } - -:host { - --spectrum-closebutton-background-color-default: var( - --system-spectrum-closebutton-background-color-default - ); - --spectrum-closebutton-background-color-hover: var( - --system-spectrum-closebutton-background-color-hover - ); - --spectrum-closebutton-background-color-down: var( - --system-spectrum-closebutton-background-color-down - ); - --spectrum-closebutton-background-color-focus: var( - --system-spectrum-closebutton-background-color-focus - ); -} diff --git a/packages/close-button/src/spectrum-config.js b/packages/close-button/src/spectrum-config.js index 3560920b0c..21dfbdcf00 100644 --- a/packages/close-button/src/spectrum-config.js +++ b/packages/close-button/src/spectrum-config.js @@ -63,12 +63,12 @@ const config = { 'static' ), // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Closebutton--sizeM'), + converter.classToHost('spectrum-CloseButton--sizeM'), ...converter.enumerateAttributes( [ - ['spectrum-Closebutton--sizeS', 's'], - ['spectrum-Closebutton--sizeL', 'l'], - ['spectrum-Closebutton--sizeXL', 'xl'], + ['spectrum-CloseButton--sizeS', 's'], + ['spectrum-CloseButton--sizeL', 'l'], + ['spectrum-CloseButton--sizeXL', 'xl'], ], 'size' ), diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index 3a2941f6e7..7c43233516 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -37,7 +37,9 @@ "development": "./src/CoachmarkItem.dev.js", "default": "./src/CoachmarkItem.js" }, + "./src/coach-indicator-overrides.css.js": "./src/coach-indicator-overrides.css.js", "./src/coach-indicator.css.js": "./src/coach-indicator.css.js", + "./src/coachmark-overrides.css.js": "./src/coachmark-overrides.css.js", "./src/coachmark.css.js": "./src/coachmark.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -81,8 +83,8 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/coachindicator": "^2.1.0", - "@spectrum-css/coachmark": "^7.1.0" + "@spectrum-css/coachindicator": "^3.0.0-s2-foundations.15", + "@spectrum-css/coachmark": "^8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/coachmark/src/Coachmark.ts b/packages/coachmark/src/Coachmark.ts index 0e0ed5a44c..7b6975a80c 100644 --- a/packages/coachmark/src/Coachmark.ts +++ b/packages/coachmark/src/Coachmark.ts @@ -19,6 +19,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js'; import { when } from '@spectrum-web-components/base/src/directives.js'; import coachmarkStyles from './coachmark.css.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js'; import { Popover } from '@spectrum-web-components/popover'; import { join } from '@spectrum-web-components/base/src/directives.js'; @@ -43,7 +44,12 @@ import '@spectrum-web-components/quick-actions/sp-quick-actions.js'; */ export class Coachmark extends Popover { public static override get styles(): CSSResultArray { - return [...super.styles, coachmarkStyles, chevronStyles]; + return [ + ...super.styles, + coachmarkStyles, + chevronStyles, + chevronIconOverrides, + ]; } @property({ type: Object }) public item?: CoachmarkItem; diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css new file mode 100644 index 0000000000..983a99f05c --- /dev/null +++ b/packages/coachmark/src/coach-indicator-overrides.css @@ -0,0 +1,95 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-coach-indicator-ring-border-size: var( + --system-coach-indicator-ring-border-size + ); + --spectrum-coach-indicator-min-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --spectrum-coach-indicator-min-block-size: var( + --system-coach-indicator-min-block-size + ); + --spectrum-coach-indicator-inline-size: var( + --system-coach-indicator-inline-size + ); + --spectrum-coach-indicator-block-size: var( + --system-coach-indicator-block-size + ); + --spectrum-coach-indicator-ring-inline-size: var( + --system-coach-indicator-ring-inline-size + ); + --spectrum-coach-indicator-ring-block-size: var( + --system-coach-indicator-ring-block-size + ); + --spectrum-coach-indicator-ring-dark-color: var( + --system-coach-indicator-ring-dark-color + ); + --spectrum-coach-indicator-ring-light-color: var( + --system-coach-indicator-ring-light-color + ); + --spectrum-coach-indicator-top: var(--system-coach-indicator-top); + --spectrum-coach-indicator-left: var(--system-coach-indicator-left); + --spectrum-coach-animation-indicator-ring-duration: var( + --system-coach-indicator-coach-animation-indicator-ring-duration + ); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --spectrum-coach-animation-indicator-ring-center-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple + ); + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple + ); + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var( + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple + ); + --spectrum-coach-indicator-animation-name: var( + --system-coach-indicator-animation-name + ); + --spectrum-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-inner-animation-delay-multiple + ); + --spectrum-coach-indicator-animation-keyframe-0-scale: var( + --system-coach-indicator-animation-keyframe-0-scale + ); + --spectrum-coach-indicator-animation-keyframe-0-opacity: var( + --system-coach-indicator-animation-keyframe-0-opacity + ); + --spectrum-coach-indicator-animation-keyframe-50-scale: var( + --system-coach-indicator-animation-keyframe-50-scale + ); + --spectrum-coach-indicator-animation-keyframe-50-opacity: var( + --system-coach-indicator-animation-keyframe-50-opacity + ); + --spectrum-coach-indicator-animation-keyframe-100-scale: var( + --system-coach-indicator-animation-keyframe-100-scale + ); + --spectrum-coach-indicator-animation-keyframe-100-opacity: var( + --system-coach-indicator-animation-keyframe-100-opacity + ); + --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var( + --system-coach-indicator-quiet-animation-keyframe-0-scale + ); +} + +:host([quiet]) { + --spectrum-coach-indicator-quiet-ring-diameter-size: var( + --system-coach-indicator-quiet-quiet-ring-diameter-size + ); + --spectrum-coach-indicator-animation-name: var( + --system-coach-indicator-quiet-animation-name + ); +} diff --git a/packages/coachmark/src/coach-indicator.css b/packages/coachmark/src/coach-indicator.css index 45470bb32a..19317bc1f3 100644 --- a/packages/coachmark/src/coach-indicator.css +++ b/packages/coachmark/src/coach-indicator.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-coach-indicator.css'); +@import url('./coach-indicator-overrides.css'); :host { display: inline-block; diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css new file mode 100644 index 0000000000..e79be039b7 --- /dev/null +++ b/packages/coachmark/src/coachmark-overrides.css @@ -0,0 +1,94 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); + --spectrum-coachmark-width: var(--system-coach-mark-width); + --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); + --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); + --spectrum-coachmark-media-min-height: var( + --system-coach-mark-media-min-height + ); + --spectrum-coachmark-padding: var(--system-coach-mark-padding); + --spectrum-coachmark-heading-to-action-button: var( + --system-coach-mark-heading-to-action-button + ); + --spectrum-coachmark-header-to-body: var( + --system-coach-mark-header-to-body + ); + --spectrum-coachmark-body-to-footer: var( + --system-coach-mark-body-to-footer + ); + --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); + --spectrum-coachmark-title-font-family: var( + --system-coach-mark-title-font-family + ); + --spectrum-coachmark-title-font-style: var( + --system-coach-mark-title-font-style + ); + --spectrum-coachmark-title-text-font-weight: var( + --system-coach-mark-title-text-font-weight + ); + --spectrum-coachmark-title-font-size: var( + --system-coach-mark-title-font-size + ); + --spectrum-coachmark-title-text-line-height: var( + --system-coach-mark-title-text-line-height + ); + --spectrum-coachmark-content-font-color: var( + --system-coach-mark-content-font-color + ); + --spectrum-coachmark-content-font-weight: var( + --system-coach-mark-content-font-weight + ); + --spectrum-coachmark-content-font-family: var( + --system-coach-mark-content-font-family + ); + --spectrum-coachmark-content-font-style: var( + --system-coach-mark-content-font-style + ); + --spectrum-coachmark-content-line-height: var( + --system-coach-mark-content-line-height + ); + --spectrum-coachmark-content-font-size: var( + --system-coach-mark-content-font-size + ); + --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); + --spectrum-coachmark-step-font-weight: var( + --system-coach-mark-step-font-weight + ); + --spectrum-coachmark-step-font-family: var( + --system-coach-mark-step-font-family + ); + --spectrum-coachmark-step-font-style: var( + --system-coach-mark-step-font-style + ); + --spectrum-coachmark-step-line-height: var( + --system-coach-mark-step-line-height + ); + --spectrum-coachmark-step-font-size: var( + --system-coach-mark-step-font-size + ); + --spectrum-coachmark-step-to-bottom: var( + --system-coach-mark-step-to-bottom + ); + --spectrum-coachmark-popover-border-width: var( + --system-coach-mark-popover-border-width + ); + --spectrum-coachmark-popover-corner-radius: var( + --system-coach-mark-popover-corner-radius + ); + --spectrum-coachmark-buttongroup-spacing-horizontal: var( + --system-coach-mark-buttongroup-spacing-horizontal + ); +} diff --git a/packages/coachmark/src/coachmark.css b/packages/coachmark/src/coachmark.css index 263f9eb985..636670f7ad 100644 --- a/packages/coachmark/src/coachmark.css +++ b/packages/coachmark/src/coachmark.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-coachmark.css'); +@import url('./coachmark-overrides.css'); :host { /** custom to coachmark should be removed once keys component is developed by CSS **/ @@ -63,3 +64,7 @@ governing permissions and limitations under the License. flex: 0; align-self: flex-start; } + +#cover-photo { + display: contents; +} diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css index 358ce6b5bb..cd141b8ce0 100644 --- a/packages/coachmark/src/spectrum-coach-indicator.css +++ b/packages/coachmark/src/spectrum-coach-indicator.css @@ -12,136 +12,58 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coach-indicator-animation-keyframe-0-scale: 1; - --spectrum-coach-indicator-animation-keyframe-0-opacity: 0; - --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5; - --spectrum-coach-indicator-animation-keyframe-50-opacity: 1; - --spectrum-coach-indicator-animation-keyframe-100-scale: 2; - --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; -} - -@keyframes a { - 0% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } -} - -@keyframes b { - 0% { - transform: scale( - var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } -} - -:host { - --spectrum-coach-indicator-ring-border-size: var( - --spectrum-border-width-200 - ); - --spectrum-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --spectrum-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --spectrum-coach-indicator-inline-size: var( - --spectrum-coach-indicator-min-inline-size - ); - --spectrum-coach-indicator-block-size: var( - --spectrum-coach-indicator-min-block-size - ); - --spectrum-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --spectrum-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --spectrum-coach-indicator-top: calc( - var(--spectrum-coach-indicator-block-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) + margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); + min-inline-size: var( + --mod-coach-indicator-min-inline-size, + var(--spectrum-coach-indicator-min-inline-size) ); - --spectrum-coach-indicator-left: calc( - var(--spectrum-coach-indicator-inline-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) + min-block-size: var( + --mod-coach-indicator-min-block-size, + var(--spectrum-coach-indicator-min-block-size) ); - --spectrum-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 + inline-size: var( + --mod-coach-indicator-inline-size, + var(--spectrum-coach-indicator-inline-size) ); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --spectrum-coach-indicator-animation-name: a; - --spectrum-coach-indicator-inner-animation-delay-multiple: var( - --spectrum-coach-animation-indicator-ring-inner-delay-multiple + block-size: var( + --mod-coach-indicator-block-size, + var(--spectrum-coach-indicator-block-size) ); + position: relative; } :host([quiet]) { --mod-coach-indicator-min-inline-size: calc( var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ) * 2.75 ); --mod-coach-indicator-min-block-size: calc( var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ) * 2.75 ); --mod-coach-indicator-inline-size: calc( var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ) * 2.75 ); --mod-coach-indicator-block-size: calc( var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ) * 2.75 ); --mod-coach-indicator-ring-inline-size: var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ); --mod-coach-indicator-ring-block-size: var( --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter) + var(--spectrum-coach-indicator-quiet-ring-diameter-size) ); --mod-coach-indicator-top: calc( var(--mod-coach-indicator-min-inline-size) / 3 - @@ -151,7 +73,6 @@ governing permissions and limitations under the License. var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size) ); - --mod-coach-indicator-animation-name: b; --mod-coach-indicator-inner-animation-delay-multiple: var( --mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var( @@ -160,27 +81,6 @@ governing permissions and limitations under the License. ); } -:host { - margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); - min-inline-size: var( - --mod-coach-indicator-min-inline-size, - var(--spectrum-coach-indicator-min-inline-size) - ); - min-block-size: var( - --mod-coach-indicator-min-block-size, - var(--spectrum-coach-indicator-min-block-size) - ); - inline-size: var( - --mod-coach-indicator-inline-size, - var(--spectrum-coach-indicator-inline-size) - ); - block-size: var( - --mod-coach-indicator-block-size, - var(--spectrum-coach-indicator-block-size) - ); - position: relative; -} - .ring { border-style: solid; border-width: var( @@ -283,3 +183,49 @@ governing permissions and limitations under the License. animation: none; } } + +@keyframes pulse { + 0% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-0-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-50-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-100-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } +} + +@keyframes pulse-quiet { + 0% { + transform: scale( + var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-50-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-100-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } +} diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index 0d8d38e4a3..99446e29b8 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -12,65 +12,15 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); - --spectrum-coachmark-width: var(--spectrum-coach-mark-width); - --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); - --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --spectrum-coachmark-border-size: var(--mod-popover-border-width); - --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); - --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content); - --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300); - --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200); - --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300); - --spectrum-coachmark-title-color: var(--spectrum-heading-color); - --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --spectrum-coachmark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size); - --spectrum-coachmark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --spectrum-coachmark-content-font-color: var(--spectrum-body-color); - --spectrum-coachmark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-content-font-size: var( - --spectrum-coach-mark-body-size - ); - --spectrum-coachmark-step-color: var( - --spectrum-coach-mark-pagination-color - ); - --spectrum-coachmark-step-font-weight: var( - --spectrum-body-medium-font-weight - ); - --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --spectrum-coachmark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); --mod-buttongroup-justify-content: flex-end; - --mod-popover-border-width: var(--spectrum-border-width-100); - --mod-popover-corner-radius: var(--spectrum-corner-radius-100); + --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); + --mod-popover-corner-radius: var( + --spectrum-coachmark-popover-corner-radius + ); --mod-popover-content-area-spacing-vertical: 0; --mod-button-edge-to-visual-only: 9px; + --spectrum-coachmark-border-size: var(--mod-popover-border-width); + --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); min-inline-size: var( --mod-coachmark-min-width, var(--spectrum-coachmark-min-width) @@ -88,7 +38,9 @@ governing permissions and limitations under the License. } .buttongroup-mobile { - --mod-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); + --mod-buttongroup-spacing-horizontal: var( + --spectrum-coachmark-buttongroup-spacing-horizontal + ); display: var(--spectrum-coachmark-buttongroup-mobile-display); } diff --git a/packages/color-area/package.json b/packages/color-area/package.json index 078dbb054f..c7471e4e4c 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -29,6 +29,7 @@ "development": "./src/ColorArea.dev.js", "default": "./src/ColorArea.js" }, + "./src/color-area-overrides.css.js": "./src/color-area-overrides.css.js", "./src/color-area.css.js": "./src/color-area.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -69,7 +70,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/colorarea": "^5.1.0" + "@spectrum-css/colorarea": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-area/src/color-area-overrides.css b/packages/color-area/src/color-area-overrides.css new file mode 100644 index 0000000000..72129ea35e --- /dev/null +++ b/packages/color-area/src/color-area-overrides.css @@ -0,0 +1,31 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); + --spectrum-colorarea-border-color-rgb: var( + --system-color-area-border-color-rgb + ); + --spectrum-colorarea-border-color-opacity: var( + --system-color-area-border-color-opacity + ); + --spectrum-colorarea-border-color: var(--system-color-area-border-color); + --spectrum-colorarea-disabled-background-color: var( + --system-color-area-disabled-background-color + ); + --spectrum-colorarea-border-width: var(--system-color-area-border-width); + --spectrum-colorarea-height: var(--system-color-area-height); + --spectrum-colorarea-width: var(--system-color-area-width); + --spectrum-colorarea-min-width: var(--system-color-area-min-width); + --spectrum-colorarea-min-height: var(--system-color-area-min-height); +} diff --git a/packages/color-area/src/color-area.css b/packages/color-area/src/color-area.css index 646dfcd630..8638dc1f80 100644 --- a/packages/color-area/src/color-area.css +++ b/packages/color-area/src/color-area.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-color-area.css'); +@import url('./color-area-overrides.css'); :host { touch-action: none; diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css index c503af2167..d176f5b7b6 100644 --- a/packages/color-area/src/spectrum-color-area.css +++ b/packages/color-area/src/spectrum-color-area.css @@ -11,21 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-colorarea-border-radius: var( - --spectrum-color-area-border-rounding - ); - --spectrum-colorarea-border-color: #0000001a; - --spectrum-colorarea-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); -} - @media (forced-colors: active) { :host { --highcontrast-colorarea-border-color-disabled: GrayText; diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index 48297c2ee5..ada7254f72 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -29,6 +29,7 @@ "development": "./src/ColorHandle.dev.js", "default": "./src/ColorHandle.js" }, + "./src/color-handle-overrides.css.js": "./src/color-handle-overrides.css.js", "./src/color-handle.css.js": "./src/color-handle.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -62,7 +63,7 @@ "@spectrum-web-components/opacity-checkerboard": "^0.47.2" }, "devDependencies": { - "@spectrum-css/colorhandle": "^8.1.0" + "@spectrum-css/colorhandle": "^9.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/color-handle-overrides.css b/packages/color-handle/src/color-handle-overrides.css new file mode 100644 index 0000000000..21f8e9ba06 --- /dev/null +++ b/packages/color-handle/src/color-handle-overrides.css @@ -0,0 +1,52 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-colorhandle-size: var(--system-color-handle-size); + --spectrum-colorhandle-focused-size: var( + --system-color-handle-focused-size + ); + --spectrum-colorhandle-hitarea-size: var( + --system-color-handle-hitarea-size + ); + --spectrum-colorhandle-animation-duration: var( + --system-color-handle-animation-duration + ); + --spectrum-colorhandle-animation-easing: var( + --system-color-handle-animation-easing + ); + --spectrum-colorhandle-outer-border-color: var( + --system-color-handle-outer-border-color + ); + --spectrum-colorhandle-outer-border-width: var( + --system-color-handle-outer-border-width + ); + --spectrum-colorhandle-inner-border-color: var( + --system-color-handle-inner-border-color + ); + --spectrum-colorhandle-inner-border-width: var( + --system-color-handle-inner-border-width + ); + --spectrum-colorhandle-border-width: var( + --system-color-handle-border-width + ); + --spectrum-colorhandle-border-color: var( + --system-color-handle-border-color + ); + --spectrum-colorhandle-border-color-disabled: var( + --system-color-handle-border-color-disabled + ); + --spectrum-colorhandle-fill-color-disabled: var( + --system-color-handle-fill-color-disabled + ); +} diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.css index 49a853e04b..57c66be36e 100644 --- a/packages/color-handle/src/color-handle.css +++ b/packages/color-handle/src/color-handle.css @@ -11,10 +11,12 @@ governing permissions and limitations under the License. */ @import url('./spectrum-color-handle.css'); +@import url('./color-handle-overrides.css'); :host { touch-action: none; - transition: inline-size + transition: + inline-size var( --mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration) diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 506bae2f44..9ba6c9ad21 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -12,41 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorhandle-size: var(--spectrum-color-handle-size); - --spectrum-colorhandle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --spectrum-colorhandle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --spectrum-colorhandle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-colorhandle-animation-easing: ease-in-out; - --spectrum-colorhandle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --spectrum-colorhandle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --spectrum-colorhandle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --spectrum-colorhandle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --spectrum-colorhandle-border-width: var( - --spectrum-color-handle-border-width - ); - --spectrum-colorhandle-border-color: var(--spectrum-white); - --spectrum-colorhandle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-colorhandle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); --mod-opacity-checkerboard-position: 50%; z-index: 1; box-sizing: border-box; @@ -88,6 +53,10 @@ governing permissions and limitations under the License. var(--spectrum-colorhandle-animation-easing) ); border-style: solid; +} + +:host, +:host:after { border-radius: 100%; display: block; position: absolute; @@ -118,8 +87,6 @@ governing permissions and limitations under the License. var(--spectrum-colorhandle-hitarea-size) ); border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); - display: block; - position: absolute; } :host([focused]), diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index f972c988c0..ce8c0bb557 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -29,6 +29,7 @@ "development": "./src/ColorLoupe.dev.js", "default": "./src/ColorLoupe.js" }, + "./src/color-loupe-overrides.css.js": "./src/color-loupe-overrides.css.js", "./src/color-loupe.css.js": "./src/color-loupe.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^0.47.2" }, "devDependencies": { - "@spectrum-css/colorloupe": "^5.1.0" + "@spectrum-css/colorloupe": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/packages/color-loupe/src/color-loupe-overrides.css new file mode 100644 index 0000000000..824f355e97 --- /dev/null +++ b/packages/color-loupe/src/color-loupe-overrides.css @@ -0,0 +1,51 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-colorloupe-width: var(--system-color-loupe-width); + --spectrum-colorloupe-height: var(--system-color-loupe-height); + --spectrum-colorloupe-offset: var(--system-color-loupe-offset); + --spectrum-colorloupe-animation-distance: var( + --system-color-loupe-animation-distance + ); + --spectrum-colorloupe-drop-shadow-x: var( + --system-color-loupe-drop-shadow-x + ); + --spectrum-colorloupe-drop-shadow-y: var( + --system-color-loupe-drop-shadow-y + ); + --spectrum-colorloupe-drop-shadow-blur: var( + --system-color-loupe-drop-shadow-blur + ); + --spectrum-colorloupe-drop-shadow-color: var( + --system-color-loupe-drop-shadow-color + ); + --spectrum-colorloupe-outer-border-width: var( + --system-color-loupe-outer-border-width + ); + --spectrum-colorloupe-inner-border-width: var( + --system-color-loupe-inner-border-width + ); + --spectrum-colorloupe-outer-border-color: var( + --system-color-loupe-outer-border-color + ); + --spectrum-colorloupe-inner-border-color: var( + --system-color-loupe-inner-border-color + ); + --spectrum-colorloupe-checkerboard-dark-color: var( + --system-color-loupe-checkerboard-dark-color + ); + --spectrum-colorloupe-checkerboard-light-color: var( + --system-color-loupe-checkerboard-light-color + ); +} diff --git a/packages/color-loupe/src/color-loupe.css b/packages/color-loupe/src/color-loupe.css index bafc260096..1d59922127 100644 --- a/packages/color-loupe/src/color-loupe.css +++ b/packages/color-loupe/src/color-loupe.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-color-loupe.css'); +@import url('./color-loupe-overrides.css'); svg { width: inherit; diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css index 66c2850b4a..2bac5afc52 100644 --- a/packages/color-loupe/src/spectrum-color-loupe.css +++ b/packages/color-loupe/src/spectrum-color-loupe.css @@ -12,40 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); - --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); - --spectrum-colorloupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --spectrum-colorloupe-animation-distance: 8px; - --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-colorloupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --spectrum-colorloupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --spectrum-colorloupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --spectrum-colorloupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --spectrum-colorloupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --spectrum-colorloupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --spectrum-colorloupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --spectrum-colorloupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-colorloupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); inline-size: var(--spectrum-colorloupe-width); block-size: var(--spectrum-colorloupe-height); transform: translateY( diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index c8ddcdfb1a..36ba8c0413 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -29,6 +29,7 @@ "development": "./src/ColorSlider.dev.js", "default": "./src/ColorSlider.js" }, + "./src/color-slider-overrides.css.js": "./src/color-slider-overrides.css.js", "./src/color-slider.css.js": "./src/color-slider.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -69,7 +70,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/colorslider": "^6.1.0" + "@spectrum-css/colorslider": "^7.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-slider/src/color-slider-overrides.css b/packages/color-slider/src/color-slider-overrides.css new file mode 100644 index 0000000000..57a61af7b2 --- /dev/null +++ b/packages/color-slider/src/color-slider-overrides.css @@ -0,0 +1,30 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-color-slider-handle-margin-block: var( + --system-color-slider-handle-margin-block + ); + --spectrum-color-slider-border-color-rgba: var( + --system-color-slider-border-color-rgba + ); + --spectrum-color-slider-checkerboard-size: var( + --system-color-slider-checkerboard-size + ); + --spectrum-color-slider-checkerboard-dark-color: var( + --system-color-slider-checkerboard-dark-color + ); + --spectrum-color-slider-checkerboard-light-color: var( + --system-color-slider-checkerboard-light-color + ); +} diff --git a/packages/color-slider/src/color-slider.css b/packages/color-slider/src/color-slider.css index 4c5f673ec0..b13e3a5e54 100644 --- a/packages/color-slider/src/color-slider.css +++ b/packages/color-slider/src/color-slider.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-color-slider.css'); +@import url('./color-slider-overrides.css'); :host { --sp-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css index cd341e8857..ec2a9d54b1 100644 --- a/packages/color-slider/src/spectrum-color-slider.css +++ b/packages/color-slider/src/spectrum-color-slider.css @@ -11,29 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --spectrum-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); - --mod-colorhandle-hitarea-border-radius: var( - --mod-color-slider-handle-hitarea-border-radius, - 0px - ); -} - @media (forced-colors: active) { :host { --highcontrast-color-slider-border-color: CanvasText; @@ -44,6 +21,10 @@ governing permissions and limitations under the License. } :host { + --mod-colorhandle-hitarea-border-radius: var( + --mod-color-slider-handle-hitarea-border-radius, + 0px + ); min-inline-size: var( --mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length) diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index a46ad930f8..a5ebac64c8 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -29,6 +29,7 @@ "development": "./src/ColorWheel.dev.js", "default": "./src/ColorWheel.js" }, + "./src/color-wheel-overrides.css.js": "./src/color-wheel-overrides.css.js", "./src/color-wheel.css.js": "./src/color-wheel.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -68,7 +69,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/colorwheel": "^4.1.0" + "@spectrum-css/colorwheel": "^5.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts index c11f3738b2..10c63c5caa 100644 --- a/packages/color-wheel/src/ColorWheel.ts +++ b/packages/color-wheel/src/ColorWheel.ts @@ -300,9 +300,11 @@ export class ColorWheel extends Focusable { const { width: diameter = 160 } = this.boundingClientRect || {}; const styles = getComputedStyle(this); const borderWidth = parseFloat( - styles.getPropertyValue('--border-width') + styles.getPropertyValue('--_border-width') + ); + const trackWidth = parseFloat( + styles.getPropertyValue('--_track-width') ); - const trackWidth = parseFloat(styles.getPropertyValue('--track-width')); // Calculate wheel data. const radius = diameter / 2; diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css new file mode 100644 index 0000000000..c438c4fb56 --- /dev/null +++ b/packages/color-wheel/src/color-wheel-overrides.css @@ -0,0 +1,30 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-colorwheel-width: var(--system-color-wheel-width); + --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); + --spectrum-colorwheel-height: var(--system-color-wheel-height); + --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); + --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); + --spectrum-colorwheel-fill-color-disabled: var( + --system-color-wheel-fill-color-disabled + ); + --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); + --spectrum-colorwheel-colorarea-margin: var( + --system-color-wheel-colorarea-margin + ); + --spectrum-colorwheel-colorhandle-position: var( + --system-color-wheel-colorhandle-position + ); +} diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css index 2ddbcf285b..08f1c77df9 100644 --- a/packages/color-wheel/src/color-wheel.css +++ b/packages/color-wheel/src/color-wheel.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-color-wheel.css'); +@import url('./color-wheel-overrides.css'); :host { touch-action: none; diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css index 7b94ada3fd..3a3d9ffb04 100644 --- a/packages/color-wheel/src/spectrum-color-wheel.css +++ b/packages/color-wheel/src/spectrum-color-wheel.css @@ -11,27 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); - --spectrum-colorwheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-colorwheel-track-width: var( - --spectrum-color-control-track-width - ); - --spectrum-colorwheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --spectrum-colorwheel-colorhandle-position: calc( - var(--spectrum-colorwheel-width) / 2 - - var(--spectrum-colorwheel-track-width) / 2 - ); -} - @media (forced-colors: active) { :host { --highcontrast-colorwheel-border-color-disabled: GrayText; @@ -41,6 +20,14 @@ governing permissions and limitations under the License. } :host { + --_track-width: var( + --mod-colorwheel-track-width, + var(--spectrum-colorwheel-track-width) + ); + --_border-width: var( + --mod-colorwheel-border-width, + var(--spectrum-colorwheel-border-width) + ); min-inline-size: var( --mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width) @@ -50,14 +37,6 @@ governing permissions and limitations under the License. -webkit-user-select: none; user-select: none; cursor: default; - --track-width: var( - --mod-colorwheel-track-width, - var(--spectrum-colorwheel-track-width) - ); - --border-width: var( - --mod-colorwheel-border-width, - var(--spectrum-colorwheel-border-width) - ); display: block; position: relative; } diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 817fd93e31..7dcd11447c 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -29,6 +29,7 @@ "development": "./src/Combobox.dev.js", "default": "./src/Combobox.js" }, + "./src/combobox-overrides.css.js": "./src/combobox-overrides.css.js", "./src/combobox.css.js": "./src/combobox.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -69,7 +70,7 @@ "@spectrum-web-components/textfield": "^0.47.2" }, "devDependencies": { - "@spectrum-css/combobox": "^3.1.2" + "@spectrum-css/combobox": "^4.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts index 994cca96b0..3347f67aa3 100644 --- a/packages/combobox/src/Combobox.ts +++ b/packages/combobox/src/Combobox.ts @@ -40,6 +40,7 @@ import type { Tooltip } from '@spectrum-web-components/tooltip'; import styles from './combobox.css.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import { Menu, MenuItem } from '@spectrum-web-components/menu'; export type ComboboxOption = { @@ -54,7 +55,7 @@ export type ComboboxOption = { */ export class Combobox extends Textfield { public static override get styles(): CSSResultArray { - return [...super.styles, styles, chevronStyles]; + return [...super.styles, styles, chevronStyles, chevronIconOverrides]; } /** diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css new file mode 100644 index 0000000000..4d6df44f51 --- /dev/null +++ b/packages/combobox/src/combobox-overrides.css @@ -0,0 +1,251 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-combobox-border-color-default: var( + --system-combobox-border-color-default + ); + --spectrum-combobox-border-color-hover: var( + --system-combobox-border-color-hover + ); + --spectrum-combobox-border-color-focus: var( + --system-combobox-border-color-focus + ); + --spectrum-combobox-border-color-focus-hover: var( + --system-combobox-border-color-focus-hover + ); + --spectrum-combobox-border-color-key-focus: var( + --system-combobox-border-color-key-focus + ); + --spectrum-combobox-inline-size: var(--system-combobox-inline-size); + --spectrum-combobox-minimum-width-multiplier: var( + --system-combobox-minimum-width-multiplier + ); + --spectrum-combobox-focus-indicator-thickness: var( + --system-combobox-focus-indicator-thickness + ); + --spectrum-combobox-focus-indicator-gap: var( + --system-combobox-focus-indicator-gap + ); + --spectrum-combobox-focus-indicator-color: var( + --system-combobox-focus-indicator-color + ); + --spectrum-combobox-border-radius: var(--system-combobox-border-radius); + --spectrum-combobox-border-width: var(--system-combobox-border-width); + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-spacing-label-to + ); + --spectrum-combobox-font-style: var(--system-combobox-font-style); + --spectrum-combobox-line-height: var(--system-combobox-line-height); + --spectrum-combobox-border-color-invalid-default: var( + --system-combobox-border-color-invalid-default + ); + --spectrum-combobox-border-color-invalid-hover: var( + --system-combobox-border-color-invalid-hover + ); + --spectrum-combobox-border-color-invalid-focus: var( + --system-combobox-border-color-invalid-focus + ); + --spectrum-combobox-border-color-invalid-focus-hover: var( + --system-combobox-border-color-invalid-focus-hover + ); + --spectrum-combobox-border-color-invalid-key-focus: var( + --system-combobox-border-color-invalid-key-focus + ); + --spectrum-combobox-block-size: var(--system-combobox-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-spacing-inline-end-edge-to-text + ); +} + +:host([size='s']) { + --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-s-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-s-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-s-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-s-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-s-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-s-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-s-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-s-spacing-inline-end-edge-to-text + ); +} + +:host { + --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-m-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-m-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-m-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-m-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-m-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-m-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-m-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-m-spacing-inline-end-edge-to-text + ); +} + +:host([size='l']) { + --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-l-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-l-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-l-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-l-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-l-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-l-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-l-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-l-spacing-inline-end-edge-to-text + ); +} + +:host([size='xl']) { + --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-xl-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-xl-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-xl-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-xl-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-xl-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-xl-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-xl-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-xl-spacing-inline-end-edge-to-text + ); +} + +:host([quiet]) { + --spectrum-combobox-minimum-width-multiplier: var( + --system-combobox-quiet-minimum-width-multiplier + ); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-quiet-spacing-inline-icon-to-button + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-quiet-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-spacing-label-to + ); +} + +:host([quiet][size='s']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-s-spacing-label-to + ); +} + +:host([quiet]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-m-spacing-label-to + ); +} + +:host([quiet][size='l']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-l-spacing-label-to + ); +} + +:host([quiet][size='xl']) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-xl-spacing-label-to + ); +} diff --git a/packages/combobox/src/combobox.css b/packages/combobox/src/combobox.css index 44d713005b..2d0d7f33ab 100644 --- a/packages/combobox/src/combobox.css +++ b/packages/combobox/src/combobox.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-combobox.css'); +@import url('./combobox-overrides.css'); :host { display: inline-flex; diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index 6d802fcb1d..7c2285c886 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -11,71 +11,28 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@media (forced-colors: active) { + :host { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { + color: initial; + } +} + :host { - --spectrum-combobox-inline-size: var(--spectrum-field-width); - --spectrum-combobox-block-size: var(--spectrum-component-height-100); + --spectrum-combobox-button-inline-offset: 0px; --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combo-box-minimum-width-multiplier) * + var(--spectrum-combobox-minimum-width-multiplier) * var(--spectrum-combobox-block-size) ); --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-combobox-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component - ); - --spectrum-combobox-font-style: var(--spectrum-default-font-style); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); - --spectrum-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --spectrum-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --spectrum-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --spectrum-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --spectrum-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); --mod-textfield-focus-indicator-gap: var( --mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap) @@ -173,191 +130,6 @@ governing permissions and limitations under the License. --mod-picker-button-font-color-disabled: var( --mod-combobox-font-color-disabled ); -} - -:host([size='s']) { - --spectrum-combobox-block-size: var(--spectrum-component-height-75); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-combobox-font-size: var(--spectrum-font-size-75); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); -} - -:host { - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); -} - -:host([size='l']) { - --spectrum-combobox-block-size: var(--spectrum-component-height-200); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-combobox-font-size: var(--spectrum-font-size-200); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); -} - -:host([size='xl']) { - --spectrum-combobox-block-size: var(--spectrum-component-height-300); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-combobox-font-size: var(--spectrum-font-size-300); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); -} - -:host([quiet]) { - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combo-box-quiet-minimum-width-multiplier) * - var(--spectrum-combobox-block-size) - ); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component-quiet-medium - ); - --spectrum-combobox-button-inline-offset: calc( - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / - 2 - ); - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; -} - -:host([quiet][size='s']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component-quiet-small - ); -} - -:host([quiet]) { - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component-quiet-medium - ); -} - -:host([quiet][size='l']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component-quiet-large - ); -} - -:host([quiet][size='xl']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --spectrum-field-label-to-component-quiet-extra-large - ); -} - -@media (forced-colors: active) { - :host { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { - color: initial; - } -} - -:host { inline-size: var( --mod-combobox-inline-size, var(--spectrum-combobox-inline-size) @@ -434,12 +206,12 @@ governing permissions and limitations under the License. inset-inline-end: calc( var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset, 0px) + var(--spectrum-combobox-button-inline-offset) ) * -1 ); } -.button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { +.button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default) @@ -448,11 +220,9 @@ governing permissions and limitations under the License. :host([focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), -.button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus, -:host([focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), -:host:has(:focus) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { +.button:not(:disabled, .is-invalid, [quiet]):focus, +:host([focused]) .button:not(:disabled, .is-invalid, [quiet]), +:host:has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --highcontrast-combobox-border-color-highlight, var( @@ -464,22 +234,16 @@ governing permissions and limitations under the License. :host([keyboard-focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), -.button:not( - :disabled, - .is-invalid, - .spectrum-PickerButton--quiet - ):focus-visible, -:host([keyboard-focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { +.button:not(:disabled, .is-invalid, [quiet]):focus-visible, +:host([keyboard-focused]) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus) ); } -.button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active, -:host:has(:active) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { +.button:not(:disabled, .is-invalid, [quiet]):active, +:host:has(:active) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --highcontrast-combobox-border-color-highlight, var( @@ -621,9 +385,8 @@ governing permissions and limitations under the License. } @media (hover: hover) { - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover, - :host(:hover) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { + .button:not(:disabled, .is-invalid, [quiet]):hover, + :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --highcontrast-combobox-border-color-highlight, var( @@ -639,15 +402,9 @@ governing permissions and limitations under the License. .is-invalid, .spectrum-PickerButton--quiet ):hover, - .button:not( - :disabled, - .is-invalid, - .spectrum-PickerButton--quiet - ):focus:hover, - :host([focused]:hover) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), - :host(:hover):has(:focus) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { + .button:not(:disabled, .is-invalid, [quiet]):focus:hover, + :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]), + :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { --mod-picker-button-border-color: var( --highcontrast-combobox-border-color-highlight, var( @@ -723,7 +480,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset, 0px) + var(--spectrum-combobox-button-inline-offset) ) - var( --mod-combobox-border-width, @@ -768,7 +525,21 @@ governing permissions and limitations under the License. } :host([quiet]) { - border-radius: 0; + --spectrum-combobox-min-inline-size: calc( + var(--spectrum-combobox-minimum-width-multiplier) * + var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) + ); + --spectrum-combobox-button-inline-offset: calc( + var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / + 2 + ); + --spectrum-combobox-border-radius: 0; + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet + ); } :host([quiet][invalid]) #textfield .icon { @@ -809,7 +580,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset, 0px) + var(--spectrum-combobox-button-inline-offset) ) ); } @@ -829,25 +600,7 @@ governing permissions and limitations under the License. ) - var( --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset, 0px) + var(--spectrum-combobox-button-inline-offset) ) ); } - -:host { - --spectrum-combobox-border-color-default: var( - --system-spectrum-combobox-border-color-default - ); - --spectrum-combobox-border-color-hover: var( - --system-spectrum-combobox-border-color-hover - ); - --spectrum-combobox-border-color-focus: var( - --system-spectrum-combobox-border-color-focus - ); - --spectrum-combobox-border-color-focus-hover: var( - --system-spectrum-combobox-border-color-focus-hover - ); - --spectrum-combobox-border-color-key-focus: var( - --system-spectrum-combobox-border-color-key-focus - ); -} diff --git a/packages/combobox/src/spectrum-config.js b/packages/combobox/src/spectrum-config.js index c4dae1f709..976996abd0 100644 --- a/packages/combobox/src/spectrum-config.js +++ b/packages/combobox/src/spectrum-config.js @@ -50,6 +50,36 @@ const config = { 'keyboard-focused' ), converter.classToAttribute('is-disabled', 'disabled'), + { + find: [ + builder.class('spectrum-Combobox-button'), + { + type: 'pseudo-class', + kind: 'not', + selectors: [ + [builder.pseudoClass('disabled')], + [builder.class('is-invalid')], + [builder.class('spectrum-PickerButton--quiet')], + ], + }, + ], + replace: [ + { + replace: builder.class('button'), + }, + { + replace: { + kind: 'not', + type: 'pseudo-class', + selectors: [ + [builder.pseudoClass('disabled')], + [builder.class('is-invalid')], + [builder.attribute('quiet')], + ], + }, + }, + ], + }, { find: { type: 'pseudo-class', diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index fbdf85fe42..4589976d5c 100644 --- a/packages/contextual-help/package.json +++ b/packages/contextual-help/package.json @@ -29,6 +29,7 @@ "development": "./src/ContextualHelp.dev.js", "default": "./src/ContextualHelp.js" }, + "./src/contextual-help-overrides.css.js": "./src/contextual-help-overrides.css.js", "./src/contextual-help.css.js": "./src/contextual-help.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -65,7 +66,7 @@ "@spectrum-web-components/popover": "^0.47.2" }, "devDependencies": { - "@spectrum-css/contextualhelp": "^2.1.5" + "@spectrum-css/contextualhelp": "^4.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/contextual-help/src/contextual-help-overrides.css b/packages/contextual-help/src/contextual-help-overrides.css new file mode 100644 index 0000000000..468e943251 --- /dev/null +++ b/packages/contextual-help/src/contextual-help-overrides.css @@ -0,0 +1,28 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-contextual-help-padding: var(--system-contextual-help-padding); + --spectrum-contextual-help-link-spacing: var( + --system-contextual-help-link-spacing + ); + --spectrum-contextual-help-heading-size: var( + --system-contextual-help-heading-size + ); + --spectrum-contextual-help-heading-color: var( + --system-contextual-help-heading-color + ); + --spectrum-contextual-help-body-color: var( + --system-contextual-help-body-color + ); +} diff --git a/packages/contextual-help/src/contextual-help.css b/packages/contextual-help/src/contextual-help.css index f0ba64090a..dfe343af30 100644 --- a/packages/contextual-help/src/contextual-help.css +++ b/packages/contextual-help/src/contextual-help.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-contextual-help.css'); +@import url('./contextual-help-overrides.css'); :host { display: inline-block; diff --git a/packages/contextual-help/src/spectrum-contextual-help.css b/packages/contextual-help/src/spectrum-contextual-help.css index 1b8c9d339f..76b2ff53b2 100644 --- a/packages/contextual-help/src/spectrum-contextual-help.css +++ b/packages/contextual-help/src/spectrum-contextual-help.css @@ -11,17 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); - --spectrum-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); - --spectrum-contextual-help-body-color: var(--spectrum-body-color); -} - .popover { min-inline-size: var( --mod-spectrum-contextual-help-minimum-width, @@ -49,8 +38,8 @@ governing permissions and limitations under the License. position: relative; } -.popover ::slotted([slot='heading']), -.popover .body { +.popover .body, +.popover ::slotted([slot='heading']) { margin: 0; } diff --git a/packages/dialog/package.json b/packages/dialog/package.json index 32c0b46bdb..fe6b3ae11a 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -37,6 +37,7 @@ "development": "./src/DialogWrapper.dev.js", "default": "./src/DialogWrapper.js" }, + "./src/dialog-overrides.css.js": "./src/dialog-overrides.css.js", "./src/dialog.css.js": "./src/dialog.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -84,7 +85,7 @@ "@spectrum-web-components/underlay": "^0.47.2" }, "devDependencies": { - "@spectrum-css/dialog": "^10.1.2" + "@spectrum-css/dialog": "^11.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css new file mode 100644 index 0000000000..23ba2c79b7 --- /dev/null +++ b/packages/dialog/src/dialog-overrides.css @@ -0,0 +1,71 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-dialog-fullscreen-header-text-size: var( + --system-dialog-fullscreen-header-text-size + ); + --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); + --spectrum-dialog-confirm-small-width: var( + --system-dialog-confirm-small-width + ); + --spectrum-dialog-confirm-medium-width: var( + --system-dialog-confirm-medium-width + ); + --spectrum-dialog-confirm-large-width: var( + --system-dialog-confirm-large-width + ); + --spectrum-dialog-confirm-divider-block-spacing-start: var( + --system-dialog-confirm-divider-block-spacing-start + ); + --spectrum-dialog-confirm-divider-block-spacing-end: var( + --system-dialog-confirm-divider-block-spacing-end + ); + --spectrum-dialog-confirm-description-text-color: var( + --system-dialog-confirm-description-text-color + ); + --spectrum-dialog-confirm-title-text-color: var( + --system-dialog-confirm-title-text-color + ); + --spectrum-dialog-confirm-description-text-line-height: var( + --system-dialog-confirm-description-text-line-height + ); + --spectrum-dialog-confirm-title-text-line-height: var( + --system-dialog-confirm-title-text-line-height + ); + --spectrum-dialog-heading-font-weight: var( + --system-dialog-heading-font-weight + ); + --spectrum-dialog-confirm-description-padding: var( + --system-dialog-confirm-description-padding + ); + --spectrum-dialog-confirm-description-margin: var( + --system-dialog-confirm-description-margin + ); + --spectrum-dialog-confirm-footer-padding-top: var( + --system-dialog-confirm-footer-padding-top + ); + --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); + --spectrum-dialog-confirm-buttongroup-padding-top: var( + --system-dialog-confirm-buttongroup-padding-top + ); + --spectrum-dialog-confirm-close-button-size: var( + --system-dialog-confirm-close-button-size + ); + --spectrum-dialog-confirm-close-button-padding: var( + --system-dialog-confirm-close-button-padding + ); + --spectrum-dialog-confirm-divider-height: var( + --system-dialog-confirm-divider-height + ); +} diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css index 936d773b7f..295ea9354b 100644 --- a/packages/dialog/src/dialog.css +++ b/packages/dialog/src/dialog.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-dialog.css'); +@import url('./dialog-overrides.css'); :host { --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 5e92f6a3e1..c72787b882 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -12,48 +12,7 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-dialog-fullscreen-header-text-size: 28px; - --spectrum-dialog-min-inline-size: 288px; - --spectrum-dialog-confirm-small-width: 400px; - --spectrum-dialog-confirm-medium-width: 480px; - --spectrum-dialog-confirm-large-width: 640px; - --spectrum-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --spectrum-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --spectrum-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --spectrum-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --spectrum-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --spectrum-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --spectrum-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --spectrum-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); box-sizing: border-box; - inline-size: -moz-fit-content; inline-size: fit-content; min-inline-size: var( --mod-dialog-min-inline-size, @@ -112,6 +71,14 @@ governing permissions and limitations under the License. var(--spectrum-dialog-confirm-padding-grid) ) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: + 'hero hero hero hero hero hero' + '. . . . . .' + '. heading header header header .' + '. divider divider divider divider .' + '. content content content content .' + '. footer footer buttonGroup buttonGroup .' + '. . . . . .'; grid-template-rows: auto var( --mod-dialog-confirm-padding-grid, @@ -122,14 +89,6 @@ governing permissions and limitations under the License. var(--spectrum-dialog-confirm-padding-grid) ); inline-size: 100%; - grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading header header header .' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; display: grid; } @@ -306,6 +265,14 @@ governing permissions and limitations under the License. --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); + grid-template-areas: + 'hero hero hero hero hero hero hero' + '. . . . . closeButton closeButton' + '. heading header header typeIcon closeButton closeButton' + '. divider divider divider divider divider .' + '. content content content content content .' + '. footer footer buttonGroup buttonGroup buttonGroup .' + '. . . . . . .'; grid-template-rows: auto var( --mod-dialog-confirm-padding-grid, @@ -315,14 +282,6 @@ governing permissions and limitations under the License. --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid) ); - grid-template-areas: - 'hero hero hero hero hero hero hero' - '. . . . . closeButton closeButton' - '. heading header header typeIcon closeButton closeButton' - '. divider divider divider divider divider .' - '. content content content content content .' - '. footer footer buttonGroup buttonGroup buttonGroup .' - '. . . . . . .'; } :host([dismissable]) .grid .button-group { diff --git a/packages/divider/package.json b/packages/divider/package.json index 6047e9d20f..220618127f 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -29,6 +29,7 @@ "development": "./src/Divider.dev.js", "default": "./src/Divider.js" }, + "./src/divider-overrides.css.js": "./src/divider-overrides.css.js", "./src/divider.css.js": "./src/divider.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -60,7 +61,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/divider": "^3.1.0" + "@spectrum-css/divider": "^4.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/divider/src/divider-overrides.css b/packages/divider/src/divider-overrides.css new file mode 100644 index 0000000000..9a7d1fd3c4 --- /dev/null +++ b/packages/divider/src/divider-overrides.css @@ -0,0 +1,42 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-divider-background-color-small: var( + --system-divider-background-color-small + ); + --spectrum-divider-background-color-medium: var( + --system-divider-background-color-medium + ); + --spectrum-divider-background-color-large: var( + --system-divider-background-color-large + ); + --spectrum-divider-background-color-small-static-white: var( + --system-divider-background-color-small-static-white + ); + --spectrum-divider-background-color-medium-static-white: var( + --system-divider-background-color-medium-static-white + ); + --spectrum-divider-background-color-large-static-white: var( + --system-divider-background-color-large-static-white + ); + --spectrum-divider-background-color-small-static-black: var( + --system-divider-background-color-small-static-black + ); + --spectrum-divider-background-color-medium-static-black: var( + --system-divider-background-color-medium-static-black + ); + --spectrum-divider-background-color-large-static-black: var( + --system-divider-background-color-large-static-black + ); +} diff --git a/packages/divider/src/divider.css b/packages/divider/src/divider.css index 3aa906f85b..6d19737ada 100644 --- a/packages/divider/src/divider.css +++ b/packages/divider/src/divider.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-divider.css'); +@import url('./divider-overrides.css'); :host { display: block; diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css index 97eb622912..81f5a90222 100644 --- a/packages/divider/src/spectrum-divider.css +++ b/packages/divider/src/spectrum-divider.css @@ -11,32 +11,29 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@media (forced-colors: active) { + :host { + background-color: CanvasText !important; + } +} + :host { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-medium - ); - --spectrum-divider-background-color-small: var(--spectrum-gray-300); - --spectrum-divider-background-color-medium: var(--spectrum-gray-300); - --spectrum-divider-background-color-large: var(--spectrum-gray-800); - --spectrum-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --spectrum-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --spectrum-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --spectrum-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 + block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + inline-size: 100%; + border: none; + border-width: var( + --mod-divider-thickness, + var(--spectrum-divider-thickness) ); - --spectrum-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 + border-radius: var( + --mod-divider-thickness, + var(--spectrum-divider-thickness) ); - --spectrum-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 + background-color: var( + --mod-divider-background-color, + var(--spectrum-divider-background-color) ); + overflow: visible; } :host([size='s']) { @@ -46,6 +43,7 @@ governing permissions and limitations under the License. ); } +:host, :host { --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); --spectrum-divider-background-color: var( @@ -60,40 +58,6 @@ governing permissions and limitations under the License. ); } -@media (forced-colors: active) { - :host, - :host([size='l']), - :host, - :host([size='s']) { - --spectrum-divider-background-color: CanvasText; - --spectrum-divider-background-color-small-static-white: CanvasText; - --spectrum-divider-background-color-medium-static-white: CanvasText; - --spectrum-divider-background-color-large-static-white: CanvasText; - --spectrum-divider-background-color-small-static-black: CanvasText; - --spectrum-divider-background-color-medium-static-black: CanvasText; - --spectrum-divider-background-color-large-static-black: CanvasText; - } -} - -:host { - block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - inline-size: 100%; - border: none; - border-width: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - border-radius: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - background-color: var( - --mod-divider-background-color, - var(--spectrum-divider-background-color) - ); - overflow: visible; -} - :host([static='white'][size='s']) { --spectrum-divider-background-color: var( --mod-divider-background-color-small-static-white, @@ -142,6 +106,7 @@ governing permissions and limitations under the License. var(--spectrum-divider-thickness) ); margin-block: var(--mod-divider-vertical-margin); + block-size: 100%; block-size: var(--mod-divider-vertical-height, 100%); align-self: var(--mod-divider-vertical-align); } diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 351ce640e9..33b3bdf394 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -29,6 +29,7 @@ "development": "./src/Dropzone.dev.js", "default": "./src/Dropzone.js" }, + "./src/dropzone-overrides.css.js": "./src/dropzone-overrides.css.js", "./src/dropzone.css.js": "./src/dropzone.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -60,7 +61,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/dropzone": "^6.1.0" + "@spectrum-css/dropzone": "^7.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css new file mode 100644 index 0000000000..b7bc5036ef --- /dev/null +++ b/packages/dropzone/src/dropzone-overrides.css @@ -0,0 +1,102 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-drop-zone-padding: var(--system-drop-zone-padding); + --spectrum-drop-zone-illustration-to-heading: var( + --system-drop-zone-illustration-to-heading + ); + --spectrum-drop-zone-heading-to-body: var( + --system-drop-zone-heading-to-body + ); + --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); + --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); + --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); + --spectrum-drop-zone-heading-font-family: var( + --system-drop-zone-heading-font-family + ); + --spectrum-drop-zone-heading-font-weight: var( + --system-drop-zone-heading-font-weight + ); + --spectrum-drop-zone-heading-font-style: var( + --system-drop-zone-heading-font-style + ); + --spectrum-drop-zone-heading-font-size: var( + --system-drop-zone-heading-font-size + ); + --spectrum-drop-zone-heading-line-height: var( + --system-drop-zone-heading-line-height + ); + --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); + --spectrum-drop-zone-body-font-family: var( + --system-drop-zone-body-font-family + ); + --spectrum-drop-zone-body-font-weight: var( + --system-drop-zone-body-font-weight + ); + --spectrum-drop-zone-body-font-style: var( + --system-drop-zone-body-font-style + ); + --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); + --spectrum-drop-zone-body-line-height: var( + --system-drop-zone-body-line-height + ); + --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); + --spectrum-drop-zone-background-color: var( + --system-drop-zone-background-color + ); + --spectrum-drop-zone-border-color-hover: var( + --system-drop-zone-border-color-hover + ); + --spectrum-drop-zone-illustration-color: var( + --system-drop-zone-illustration-color + ); + --spectrum-drop-zone-illustration-color-hover: var( + --system-drop-zone-illustration-color-hover + ); + --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); + --spectrum-drop-zone-content-max-width: var( + --system-drop-zone-content-max-width + ); + --spectrum-drop-zone-content-edge-to-text: var( + --system-drop-zone-content-edge-to-text + ); + --spectrum-drop-zone-content-top-to-text: var( + --system-drop-zone-content-top-to-text + ); + --spectrum-drop-zone-content-bottom-to-text: var( + --system-drop-zone-content-bottom-to-text + ); + --spectrum-drop-zone-content-font-family: var( + --system-drop-zone-content-font-family + ); + --spectrum-drop-zone-content-font-weight: var( + --system-drop-zone-content-font-weight + ); + --spectrum-drop-zone-content-font-style: var( + --system-drop-zone-content-font-style + ); + --spectrum-drop-zone-content-font-size: var( + --system-drop-zone-content-font-size + ); + --spectrum-drop-zone-content-line-height: var( + --system-drop-zone-content-line-height + ); + --spectrum-drop-zone-content-background-color: var( + --system-drop-zone-content-background-color + ); + --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); + --spectrum-drop-zone-heading-font-size-cjk: var( + --system-drop-zone-heading-font-size-cjk + ); +} diff --git a/packages/dropzone/src/dropzone.css b/packages/dropzone/src/dropzone.css index b837bd9496..d04055ca7b 100644 --- a/packages/dropzone/src/dropzone.css +++ b/packages/dropzone/src/dropzone.css @@ -9,7 +9,9 @@ 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 url('./spectrum-dropzone.css'); +@import url('./dropzone-overrides.css'); /* * Host is inline-block by default which caused all the computed styling to be wrong. diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 24af634adb..23fd025125 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -12,76 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-drop-zone-padding: var(--spectrum-spacing-400); - --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); - --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - --spectrum-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --spectrum-drop-zone-heading-font-size: var( - --spectrum-drop-zone-title-size - ); - --spectrum-drop-zone-heading-line-height: var( - --spectrum-heading-line-height - ); - --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); - --spectrum-drop-zone-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); - --spectrum-drop-zone-body-color: var(--spectrum-body-color); - --spectrum-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --spectrum-drop-zone-border-color-hover: var( - --spectrum-accent-visual-color - ); - --spectrum-drop-zone-illustration-color: var( - --spectrum-neutral-visual-color - ); - --spectrum-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); - --spectrum-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --spectrum-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --spectrum-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); - --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); - --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); - --spectrum-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --spectrum-drop-zone-content-color: var(--spectrum-white); --mod-illustrated-message-content-maximum-width: var( --mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width) @@ -161,17 +91,6 @@ governing permissions and limitations under the License. --mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text) ); -} - -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-drop-zone-heading-font-size: var( - --spectrum-drop-zone-cjk-title-size - ); -} - -:host { box-sizing: border-box; inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); padding: calc( @@ -194,18 +113,30 @@ governing permissions and limitations under the License. --mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius) ); - border-style: var(--mod-drop-zone-border-style, dashed); - background-size: cover; + border-style: dashed; + border-style: var( + --mod-drop-zone-border-style, + var(--spectrum-drop-zone-border-style, dashed) + ); background-color: var( --mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color) ); + background-size: cover; +} + +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-drop-zone-heading-font-size: var( + --spectrum-drop-zone-heading-font-size-cjk + ); } :host([dragged]) { --mod-drop-zone-border-style: var( - --mod-drop-zone-border-style--dragged, - var(--mod-drop-zone-border-style-dragged, solid) + --mod-drop-zone-border-style-dragged, + solid ); --mod-drop-zone-background-color: rgba( var(--spectrum-drop-zone-background-color), @@ -255,7 +186,11 @@ governing permissions and limitations under the License. } .spectrum-DropZone-content { - display: var(--mod-drop-zone-content-display, none); + display: none; + display: var( + --mod-drop-zone-content-display, + var(--spectrum-drop-zone-content-display, none) + ); block-size: 100%; z-index: 1; justify-content: center; diff --git a/packages/field-group/package.json b/packages/field-group/package.json index a726c6b5ce..7c12611103 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -29,6 +29,7 @@ "development": "./src/FieldGroup.dev.js", "default": "./src/FieldGroup.js" }, + "./src/field-group-overrides.css.js": "./src/field-group-overrides.css.js", "./src/field-group.css.js": "./src/field-group.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/help-text": "^0.47.2" }, "devDependencies": { - "@spectrum-css/fieldgroup": "^5.1.0" + "@spectrum-css/fieldgroup": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css new file mode 100644 index 0000000000..757af674dc --- /dev/null +++ b/packages/field-group/src/field-group-overrides.css @@ -0,0 +1,19 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-fieldgroup-margin: var(--system-field-group-margin); + --spectrum-fieldgroup-readonly-delimiter: var( + --system-field-group-readonly-delimiter + ); +} diff --git a/packages/field-group/src/field-group.css b/packages/field-group/src/field-group.css index 3f0c127a95..5edd827231 100644 --- a/packages/field-group/src/field-group.css +++ b/packages/field-group/src/field-group.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-field-group.css'); +@import url('./field-group-overrides.css'); :host([horizontal][dir='rtl']) slot:not([name])::slotted(*:not(:last-child)), :host([dir='rtl']:not([vertical])) diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index bbdaee5f12..72c16e86b2 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -12,8 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .group { - --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); - --spectrum-fieldgroup-readonly-delimiter: ','; flex-flow: column wrap; display: flex; } diff --git a/packages/field-label/package.json b/packages/field-label/package.json index b0efc5c2d4..e967e6089a 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -29,6 +29,7 @@ "development": "./src/FieldLabel.dev.js", "default": "./src/FieldLabel.js" }, + "./src/field-label-overrides.css.js": "./src/field-label-overrides.css.js", "./src/field-label.css.js": "./src/field-label.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/fieldlabel": "^8.1.0" + "@spectrum-css/fieldlabel": "^9.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts index 25b14d4a1d..94d17692da 100644 --- a/packages/field-label/src/FieldLabel.ts +++ b/packages/field-label/src/FieldLabel.ts @@ -27,6 +27,7 @@ import type { Focusable } from '@spectrum-web-components/shared'; import { randomID } from '@spectrum-web-components/shared/src/random-id.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js'; import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js'; +import asteriskIconOverrides from '@spectrum-web-components/icon/src/icon-asterisk-overrides.css.js'; import { conditionAttributeWithId, conditionAttributeWithoutId, @@ -55,7 +56,7 @@ export class FieldLabel extends SizedMixin(SpectrumElement, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [styles, asteriskIconStyles]; + return [styles, asteriskIconStyles, asteriskIconOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css new file mode 100644 index 0000000000..61d2b2bc46 --- /dev/null +++ b/packages/field-label/src/field-label-overrides.css @@ -0,0 +1,126 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-fieldlabel-min-height: var(--system-field-label-min-height); + --spectrum-fieldlabel-color: var(--system-field-label-color); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-text-to-asterisk + ); + --spectrum-fieldlabel-font-weight: var(--system-field-label-font-weight); + --spectrum-fieldlabel-line-height: var(--system-field-label-line-height); + --spectrum-fieldlabel-line-height-cjk: var( + --system-field-label-line-height-cjk + ); + --spectrum-fieldlabel-top-to-text: var(--system-field-label-top-to-text); + --spectrum-fieldlabel-bottom-to-text: var( + --system-field-label-bottom-to-text + ); + --spectrum-fieldlabel-font-size: var(--system-field-label-font-size); + --spectrum-fieldlabel-side-margin-block-start: var( + --system-field-label-side-margin-block-start + ); + --spectrum-fieldlabel-side-padding-right: var( + --system-field-label-side-padding-right + ); +} + +:host([size='s']) { + --spectrum-fieldlabel-min-height: var( + --system-field-label-size-s-min-height + ); + --spectrum-fieldlabel-top-to-text: var( + --system-field-label-size-s-top-to-text + ); + --spectrum-fieldlabel-bottom-to-text: var( + --system-field-label-size-s-bottom-to-text + ); + --spectrum-fieldlabel-font-size: var(--system-field-label-size-s-font-size); + --spectrum-fieldlabel-side-margin-block-start: var( + --system-field-label-size-s-side-margin-block-start + ); + --spectrum-fieldlabel-side-padding-right: var( + --system-field-label-size-s-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-s-text-to-asterisk + ); +} + +:host { + --spectrum-fieldlabel-min-height: var( + --system-field-label-size-m-min-height + ); + --spectrum-fieldlabel-top-to-text: var( + --system-field-label-size-m-top-to-text + ); + --spectrum-fieldlabel-bottom-to-text: var( + --system-field-label-size-m-bottom-to-text + ); + --spectrum-fieldlabel-font-size: var(--system-field-label-size-m-font-size); + --spectrum-fieldlabel-side-margin-block-start: var( + --system-field-label-size-m-side-margin-block-start + ); + --spectrum-fieldlabel-side-padding-right: var( + --system-field-label-size-m-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-m-text-to-asterisk + ); +} + +:host([size='l']) { + --spectrum-fieldlabel-min-height: var( + --system-field-label-size-l-min-height + ); + --spectrum-fieldlabel-top-to-text: var( + --system-field-label-size-l-top-to-text + ); + --spectrum-fieldlabel-bottom-to-text: var( + --system-field-label-size-l-bottom-to-text + ); + --spectrum-fieldlabel-font-size: var(--system-field-label-size-l-font-size); + --spectrum-fieldlabel-side-margin-block-start: var( + --system-field-label-size-l-side-margin-block-start + ); + --spectrum-fieldlabel-side-padding-right: var( + --system-field-label-size-l-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-l-text-to-asterisk + ); +} + +:host([size='xl']) { + --spectrum-fieldlabel-min-height: var( + --system-field-label-size-xl-min-height + ); + --spectrum-fieldlabel-top-to-text: var( + --system-field-label-size-xl-top-to-text + ); + --spectrum-fieldlabel-bottom-to-text: var( + --system-field-label-size-xl-bottom-to-text + ); + --spectrum-fieldlabel-font-size: var( + --system-field-label-size-xl-font-size + ); + --spectrum-fieldlabel-side-margin-block-start: var( + --system-field-label-size-xl-side-margin-block-start + ); + --spectrum-fieldlabel-side-padding-right: var( + --system-field-label-size-xl-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-xl-text-to-asterisk + ); +} diff --git a/packages/field-label/src/field-label.css b/packages/field-label/src/field-label.css index a29252e2dc..1d3b1ad1b2 100644 --- a/packages/field-label/src/field-label.css +++ b/packages/field-label/src/field-label.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-field-label.css'); +@import url('./field-label-overrides.css'); label { display: inline-block; diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index ecd0f3e789..b952be0bb8 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -11,87 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); -} - -:host([size='s']) { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); - --spectrum-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); -} - -:host { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); -} - -:host([size='l']) { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); - --spectrum-fieldlabel-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-fieldlabel-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - --spectrum-fieldlabel-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); -} - -:host([size='xl']) { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); - --spectrum-fieldlabel-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-fieldlabel-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-fieldlabel-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); -} - :host { box-sizing: border-box; min-block-size: var( @@ -99,13 +18,30 @@ governing permissions and limitations under the License. var(--spectrum-fieldlabel-min-height) ); padding-block: var( - --mod-field-label-top-to-text, - var(--spectrum-fieldlabel-top-to-text) - ) + --mod-fieldlabel-padding-block, var( - --mod-field-label-bottom-to-text, - var(--spectrum-fieldlabel-bottom-to-text) - ); + --mod-field-label-top-to-text, + var(--spectrum-fieldlabel-top-to-text) + ) + var( + --mod-field-label-bottom-to-text, + var(--spectrum-fieldlabel-bottom-to-text) + ) + ); + padding-inline: 0; + padding-inline: var(--mod-fieldlabel-padding-inline, 0); + margin-block: 0; + margin-block: var( + --mod-fieldlabel-margin-block, + var(--mod-fieldlabel-margin-block-start, 0) + var(--mod-fieldlabel-margin-block-end, 0) + ); + margin-inline: 0; + margin-inline: var( + --mod-fieldlabel-margin-inline, + var(--mod-fieldlabel-margin-inline-start, 0) + var(--mod-fieldlabel-margin-inline-end, 0) + ); font-size: var( --mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size) @@ -120,15 +56,14 @@ governing permissions and limitations under the License. ); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--spectrum-fieldlabel-color); - padding-inline: 0; + color: var(--mod-fieldlabel-color, var(--spectrum-fieldlabel-color)); display: block; } :host(:lang(ja)), :host(:lang(ko)), :host(:lang(zh)) { - line-height: var( + --mod-fieldlabel-line-height: var( --mod-fieldlabel-line-height-cjk, var(--spectrum-fieldlabel-line-height-cjk) ); @@ -141,6 +76,7 @@ governing permissions and limitations under the License. var(--spectrum-field-label-text-to-asterisk) ) 0; + vertical-align: initial; vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); } diff --git a/packages/help-text/package.json b/packages/help-text/package.json index 9cc885137f..dae935ed32 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -37,6 +37,7 @@ "development": "./src/HelpTextManager.dev.js", "default": "./src/HelpTextManager.js" }, + "./src/help-text-overrides.css.js": "./src/help-text-overrides.css.js", "./src/help-text.css.js": "./src/help-text.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -82,7 +83,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/helptext": "^5.1.0" + "@spectrum-css/helptext": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css new file mode 100644 index 0000000000..5beea7bdca --- /dev/null +++ b/packages/help-text/src/help-text-overrides.css @@ -0,0 +1,136 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-helptext-line-height: var(--system-help-text-line-height); + --spectrum-helptext-content-color-default: var( + --system-help-text-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-icon-color-default + ); + --spectrum-helptext-disabled-content-color: var( + --system-help-text-disabled-content-color + ); +} + +:host([variant='neutral']) { + --spectrum-helptext-content-color-default: var( + --system-help-text-neutral-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-neutral-icon-color-default + ); +} + +:host([variant='negative']) { + --spectrum-helptext-content-color-default: var( + --system-help-text-negative-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-negative-icon-color-default + ); +} + +:host([disabled]) { + --spectrum-helptext-content-color-default: var( + --system-help-text-disabled-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-disabled-icon-color-default + ); +} + +:host(:lang(ja)) { + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-ja-line-height-cjk + ); +} + +:host(:lang(zh)) { + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-zh-line-height-cjk + ); +} + +:host(:lang(ko)) { + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-ko-line-height-cjk + ); +} + +:host([size='s']) { + --spectrum-helptext-min-height: var(--system-help-text-size-s-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-s-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-s-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-s-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-s-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-s-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-s-bottom-to-text + ); +} + +:host { + --spectrum-helptext-min-height: var(--system-help-text-size-m-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-m-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-m-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-m-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-m-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-m-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-m-bottom-to-text + ); +} + +:host([size='l']) { + --spectrum-helptext-min-height: var(--system-help-text-size-l-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-l-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-l-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-l-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-l-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-l-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-l-bottom-to-text + ); +} + +:host([size='xl']) { + --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-xl-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-xl-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var( + --system-help-text-size-xl-top-to-text + ); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-xl-bottom-to-text + ); +} diff --git a/packages/help-text/src/help-text.css b/packages/help-text/src/help-text.css index 169207c1b5..b0b4298b53 100644 --- a/packages/help-text/src/help-text.css +++ b/packages/help-text/src/help-text.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-help-text.css'); +@import url('./help-text-overrides.css'); diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css index 25609b700e..0d690297e2 100644 --- a/packages/help-text/src/spectrum-help-text.css +++ b/packages/help-text/src/spectrum-help-text.css @@ -11,118 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-helptext-line-height: var(--spectrum-line-height-100); - --spectrum-helptext-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-helptext-disabled-content-color: var( - --spectrum-disabled-content-color - ); -} - -:host([variant='neutral']) { - --spectrum-helptext-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); -} - -:host([variant='negative']) { - --spectrum-helptext-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); -} - -:host([disabled]) { - --spectrum-helptext-content-color-default: var( - --spectrum-helptext-disabled-content-color - ); - --spectrum-helptext-icon-color-default: var( - --spectrum-helptext-disabled-content-color - ); -} - -:host(:lang(ja)), -:host(:lang(ko)), -:host(:lang(zh)) { - --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); -} - -:host([size='s']) { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); -} - -:host { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); -} - -:host([size='l']) { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); -} - -:host([size='xl']) { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); -} - @media (forced-colors: active) { :host { --highcontrast-helptext-content-color-default: CanvasText; @@ -137,6 +25,9 @@ governing permissions and limitations under the License. } :host { + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); color: var( --highcontrast-helptext-content-color-default, var( diff --git a/packages/icon/package.json b/packages/icon/package.json index 0d6a1db5f6..bd0a7ba268 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -33,6 +33,16 @@ "development": "./src/IconBase.dev.js", "default": "./src/IconBase.js" }, + "./src/icon-arrow-overrides.css.js": "./src/icon-arrow-overrides.css.js", + "./src/icon-asterisk-overrides.css.js": "./src/icon-asterisk-overrides.css.js", + "./src/icon-checkmark-overrides.css.js": "./src/icon-checkmark-overrides.css.js", + "./src/icon-chevron-overrides.css.js": "./src/icon-chevron-overrides.css.js", + "./src/icon-corner-triangle-overrides.css.js": "./src/icon-corner-triangle-overrides.css.js", + "./src/icon-cross-overrides.css.js": "./src/icon-cross-overrides.css.js", + "./src/icon-dash-overrides.css.js": "./src/icon-dash-overrides.css.js", + "./src/icon-overrides.css.js": "./src/icon-overrides.css.js", + "./src/icon-single-gripper-overrides.css.js": "./src/icon-single-gripper-overrides.css.js", + "./src/icon-triple-gripper-overrides.css.js": "./src/icon-triple-gripper-overrides.css.js", "./src/icon.css.js": "./src/icon.css.js", "./src/index.js": { "development": "./src/index.dev.js", @@ -75,7 +85,7 @@ "@spectrum-web-components/iconset": "^0.47.2" }, "devDependencies": { - "@spectrum-css/icon": "^7.1.0" + "@spectrum-css/icon": "^8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/icon/src/icon-arrow-overrides.css b/packages/icon/src/icon-arrow-overrides.css new file mode 100644 index 0000000000..3720577ce1 --- /dev/null +++ b/packages/icon/src/icon-arrow-overrides.css @@ -0,0 +1,124 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-ArrowRight75 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-75-icon-size); +} + +.spectrum-UIIcon-ArrowRight100 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-100-icon-size); +} + +.spectrum-UIIcon-ArrowRight200 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-200-icon-size); +} + +.spectrum-UIIcon-ArrowRight300 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-300-icon-size); +} + +.spectrum-UIIcon-ArrowRight400 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-400-icon-size); +} + +.spectrum-UIIcon-ArrowRight500 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-500-icon-size); +} + +.spectrum-UIIcon-ArrowRight600 { + --spectrum-icon-size: var(--system-ui-icon-arrow-right-600-icon-size); +} + +.spectrum-UIIcon-ArrowDown75 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-75-icon-size); +} + +.spectrum-UIIcon-ArrowDown100 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-100-icon-size); +} + +.spectrum-UIIcon-ArrowDown200 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-200-icon-size); +} + +.spectrum-UIIcon-ArrowDown300 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-300-icon-size); +} + +.spectrum-UIIcon-ArrowDown400 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-400-icon-size); +} + +.spectrum-UIIcon-ArrowDown500 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-500-icon-size); +} + +.spectrum-UIIcon-ArrowDown600 { + --spectrum-icon-size: var(--system-ui-icon-arrow-down-600-icon-size); +} + +.spectrum-UIIcon-ArrowLeft75 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-75-icon-size); +} + +.spectrum-UIIcon-ArrowLeft100 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-100-icon-size); +} + +.spectrum-UIIcon-ArrowLeft200 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-200-icon-size); +} + +.spectrum-UIIcon-ArrowLeft300 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-300-icon-size); +} + +.spectrum-UIIcon-ArrowLeft400 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-400-icon-size); +} + +.spectrum-UIIcon-ArrowLeft500 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-500-icon-size); +} + +.spectrum-UIIcon-ArrowLeft600 { + --spectrum-icon-size: var(--system-ui-icon-arrow-left-600-icon-size); +} + +.spectrum-UIIcon-ArrowUp75 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-75-icon-size); +} + +.spectrum-UIIcon-ArrowUp100 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-100-icon-size); +} + +.spectrum-UIIcon-ArrowUp200 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-200-icon-size); +} + +.spectrum-UIIcon-ArrowUp300 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-300-icon-size); +} + +.spectrum-UIIcon-ArrowUp400 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-400-icon-size); +} + +.spectrum-UIIcon-ArrowUp500 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-500-icon-size); +} + +.spectrum-UIIcon-ArrowUp600 { + --spectrum-icon-size: var(--system-ui-icon-arrow-up-600-icon-size); +} diff --git a/packages/icon/src/icon-asterisk-overrides.css b/packages/icon/src/icon-asterisk-overrides.css new file mode 100644 index 0000000000..6cc48423c4 --- /dev/null +++ b/packages/icon/src/icon-asterisk-overrides.css @@ -0,0 +1,28 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Asterisk75 { + --spectrum-icon-size: var(--system-ui-icon-asterisk-75-icon-size); +} + +.spectrum-UIIcon-Asterisk100 { + --spectrum-icon-size: var(--system-ui-icon-asterisk-100-icon-size); +} + +.spectrum-UIIcon-Asterisk200 { + --spectrum-icon-size: var(--system-ui-icon-asterisk-200-icon-size); +} + +.spectrum-UIIcon-Asterisk300 { + --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); +} diff --git a/packages/icon/src/icon-checkmark-overrides.css b/packages/icon/src/icon-checkmark-overrides.css new file mode 100644 index 0000000000..2eb94d9059 --- /dev/null +++ b/packages/icon/src/icon-checkmark-overrides.css @@ -0,0 +1,44 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Checkmark50 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-50-icon-size); +} + +.spectrum-UIIcon-Checkmark75 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-75-icon-size); +} + +.spectrum-UIIcon-Checkmark100 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-100-icon-size); +} + +.spectrum-UIIcon-Checkmark200 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-200-icon-size); +} + +.spectrum-UIIcon-Checkmark300 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-300-icon-size); +} + +.spectrum-UIIcon-Checkmark400 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-400-icon-size); +} + +.spectrum-UIIcon-Checkmark500 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-500-icon-size); +} + +.spectrum-UIIcon-Checkmark600 { + --spectrum-icon-size: var(--system-ui-icon-checkmark-600-icon-size); +} diff --git a/packages/icon/src/icon-chevron-overrides.css b/packages/icon/src/icon-chevron-overrides.css new file mode 100644 index 0000000000..d4ea6b15b6 --- /dev/null +++ b/packages/icon/src/icon-chevron-overrides.css @@ -0,0 +1,124 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-ChevronRight50 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); +} + +.spectrum-UIIcon-ChevronDown50 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-50-icon-size); +} + +.spectrum-UIIcon-ChevronRight75 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-75-icon-size); +} + +.spectrum-UIIcon-ChevronDown75 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-75-icon-size); +} + +.spectrum-UIIcon-ChevronRight100 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-100-icon-size); +} + +.spectrum-UIIcon-ChevronDown100 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-100-icon-size); +} + +.spectrum-UIIcon-ChevronRight200 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-200-icon-size); +} + +.spectrum-UIIcon-ChevronDown200 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-200-icon-size); +} + +.spectrum-UIIcon-ChevronRight300 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-300-icon-size); +} + +.spectrum-UIIcon-ChevronDown300 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-300-icon-size); +} + +.spectrum-UIIcon-ChevronRight400 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-400-icon-size); +} + +.spectrum-UIIcon-ChevronDown400 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-400-icon-size); +} + +.spectrum-UIIcon-ChevronRight500 { + --spectrum-icon-size: var(--system-ui-icon-chevron-right-500-icon-size); +} + +.spectrum-UIIcon-ChevronDown500 { + --spectrum-icon-size: var(--system-ui-icon-chevron-down-500-icon-size); +} + +.spectrum-UIIcon-ChevronLeft50 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-50-icon-size); +} + +.spectrum-UIIcon-ChevronLeft75 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-75-icon-size); +} + +.spectrum-UIIcon-ChevronLeft100 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-100-icon-size); +} + +.spectrum-UIIcon-ChevronLeft200 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-200-icon-size); +} + +.spectrum-UIIcon-ChevronLeft300 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-300-icon-size); +} + +.spectrum-UIIcon-ChevronLeft400 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-400-icon-size); +} + +.spectrum-UIIcon-ChevronLeft500 { + --spectrum-icon-size: var(--system-ui-icon-chevron-left-500-icon-size); +} + +.spectrum-UIIcon-ChevronUp50 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-50-icon-size); +} + +.spectrum-UIIcon-ChevronUp75 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-75-icon-size); +} + +.spectrum-UIIcon-ChevronUp100 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-100-icon-size); +} + +.spectrum-UIIcon-ChevronUp200 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-200-icon-size); +} + +.spectrum-UIIcon-ChevronUp300 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-300-icon-size); +} + +.spectrum-UIIcon-ChevronUp400 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-400-icon-size); +} + +.spectrum-UIIcon-ChevronUp500 { + --spectrum-icon-size: var(--system-ui-icon-chevron-up-500-icon-size); +} diff --git a/packages/icon/src/icon-corner-triangle-overrides.css b/packages/icon/src/icon-corner-triangle-overrides.css new file mode 100644 index 0000000000..c3cca3d2c4 --- /dev/null +++ b/packages/icon/src/icon-corner-triangle-overrides.css @@ -0,0 +1,28 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-CornerTriangle75 { + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-75-icon-size); +} + +.spectrum-UIIcon-CornerTriangle100 { + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-100-icon-size); +} + +.spectrum-UIIcon-CornerTriangle200 { + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-200-icon-size); +} + +.spectrum-UIIcon-CornerTriangle300 { + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-300-icon-size); +} diff --git a/packages/icon/src/icon-cross-overrides.css b/packages/icon/src/icon-cross-overrides.css new file mode 100644 index 0000000000..e725660f02 --- /dev/null +++ b/packages/icon/src/icon-cross-overrides.css @@ -0,0 +1,40 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Cross75 { + --spectrum-icon-size: var(--system-ui-icon-cross-75-icon-size); +} + +.spectrum-UIIcon-Cross100 { + --spectrum-icon-size: var(--system-ui-icon-cross-100-icon-size); +} + +.spectrum-UIIcon-Cross200 { + --spectrum-icon-size: var(--system-ui-icon-cross-200-icon-size); +} + +.spectrum-UIIcon-Cross300 { + --spectrum-icon-size: var(--system-ui-icon-cross-300-icon-size); +} + +.spectrum-UIIcon-Cross400 { + --spectrum-icon-size: var(--system-ui-icon-cross-400-icon-size); +} + +.spectrum-UIIcon-Cross500 { + --spectrum-icon-size: var(--system-ui-icon-cross-500-icon-size); +} + +.spectrum-UIIcon-Cross600 { + --spectrum-icon-size: var(--system-ui-icon-cross-600-icon-size); +} diff --git a/packages/icon/src/icon-dash-overrides.css b/packages/icon/src/icon-dash-overrides.css new file mode 100644 index 0000000000..dd0c1c2a95 --- /dev/null +++ b/packages/icon/src/icon-dash-overrides.css @@ -0,0 +1,44 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-UIIcon-Dash50 { + --spectrum-icon-size: var(--system-ui-icon-dash-50-icon-size); +} + +.spectrum-UIIcon-Dash75 { + --spectrum-icon-size: var(--system-ui-icon-dash-75-icon-size); +} + +.spectrum-UIIcon-Dash100 { + --spectrum-icon-size: var(--system-ui-icon-dash-100-icon-size); +} + +.spectrum-UIIcon-Dash200 { + --spectrum-icon-size: var(--system-ui-icon-dash-200-icon-size); +} + +.spectrum-UIIcon-Dash300 { + --spectrum-icon-size: var(--system-ui-icon-dash-300-icon-size); +} + +.spectrum-UIIcon-Dash400 { + --spectrum-icon-size: var(--system-ui-icon-dash-400-icon-size); +} + +.spectrum-UIIcon-Dash500 { + --spectrum-icon-size: var(--system-ui-icon-dash-500-icon-size); +} + +.spectrum-UIIcon-Dash600 { + --spectrum-icon-size: var(--system-ui-icon-dash-600-icon-size); +} diff --git a/packages/icon/src/icon-overrides.css b/packages/icon/src/icon-overrides.css new file mode 100644 index 0000000000..5892b75257 --- /dev/null +++ b/packages/icon/src/icon-overrides.css @@ -0,0 +1,22 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-icon-size-xxs: var(--system-icon-size-xxs); + --spectrum-icon-size-xs: var(--system-icon-size-xs); + --spectrum-icon-size-s: var(--system-icon-size-s); + --spectrum-icon-size-m: var(--system-icon-size-m); + --spectrum-icon-size-l: var(--system-icon-size-l); + --spectrum-icon-size-xl: var(--system-icon-size-xl); + --spectrum-icon-size-xxl: var(--system-icon-size-xxl); +} diff --git a/packages/icon/src/icon-single-gripper-overrides.css b/packages/icon/src/icon-single-gripper-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/icon/src/icon-single-gripper-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/icon/src/icon-triple-gripper-overrides.css b/packages/icon/src/icon-triple-gripper-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/icon/src/icon-triple-gripper-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/icon/src/icon.css b/packages/icon/src/icon.css index 1e1d17ea50..671a0890ed 100644 --- a/packages/icon/src/icon.css +++ b/packages/icon/src/icon.css @@ -11,22 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-icon.css'); - -:host { - --spectrum-icon-size: inherit; - --spectrum-icon-inline-size: var( - --mod-icon-inline-size, - var(--mod-icon-size, var(--_spectrum-icon-size)) - ); - --spectrum-icon-block-size: var( - --mod-icon-block-size, - var(--mod-icon-size, var(--_spectrum-icon-size)) - ); - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-100) - ); -} +@import url('./icon-overrides.css'); #container { height: 100%; @@ -48,45 +33,3 @@ svg, forced-color-adjust: auto; } } - -:host([size='xxs']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-xxs) - ); -} - -:host([size='xs']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-50) - ); -} - -:host([size='s']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-75) - ); -} - -:host([size='l']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-200) - ); -} - -:host([size='xl']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-300) - ); -} - -:host([size='xxl']) { - --_spectrum-icon-size: var( - --spectrum-icon-size, - var(--spectrum-workflow-icon-size-xxl) - ); -} diff --git a/packages/icon/src/spectrum-icon-arrow.css b/packages/icon/src/spectrum-icon-arrow.css index 13aa6dfde3..d62ee2485d 100644 --- a/packages/icon/src/spectrum-icon-arrow.css +++ b/packages/icon/src/spectrum-icon-arrow.css @@ -11,135 +11,32 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); -} - -.spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); -} - -.spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); -} - -.spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); -} - -.spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); -} - -.spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); -} - -.spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); -} - +.spectrum-UIIcon-ArrowDown100, +.spectrum-UIIcon-ArrowDown200, +.spectrum-UIIcon-ArrowDown300, +.spectrum-UIIcon-ArrowDown400, +.spectrum-UIIcon-ArrowDown500, +.spectrum-UIIcon-ArrowDown600, .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(90deg); + --spectrum-icon-transform: rotate(90deg); } +.spectrum-UIIcon-ArrowLeft100, +.spectrum-UIIcon-ArrowLeft200, +.spectrum-UIIcon-ArrowLeft300, +.spectrum-UIIcon-ArrowLeft400, +.spectrum-UIIcon-ArrowLeft500, +.spectrum-UIIcon-ArrowLeft600, .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(180deg); + --spectrum-icon-transform: rotate(180deg); } +.spectrum-UIIcon-ArrowUp100, +.spectrum-UIIcon-ArrowUp200, +.spectrum-UIIcon-ArrowUp300, +.spectrum-UIIcon-ArrowUp400, +.spectrum-UIIcon-ArrowUp500, +.spectrum-UIIcon-ArrowUp600, .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - transform: rotate(270deg); + --spectrum-icon-transform: rotate(270deg); } diff --git a/packages/icon/src/spectrum-icon-asterisk.css b/packages/icon/src/spectrum-icon-asterisk.css index df4c680e02..b1cee0dbcd 100644 --- a/packages/icon/src/spectrum-icon-asterisk.css +++ b/packages/icon/src/spectrum-icon-asterisk.css @@ -11,18 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); -} - -.spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); -} - -.spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); -} - -.spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); -} diff --git a/packages/icon/src/spectrum-icon-checkmark.css b/packages/icon/src/spectrum-icon-checkmark.css index 3415b252f8..b1cee0dbcd 100644 --- a/packages/icon/src/spectrum-icon-checkmark.css +++ b/packages/icon/src/spectrum-icon-checkmark.css @@ -11,34 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); -} - -.spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); -} - -.spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); -} - -.spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); -} - -.spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); -} - -.spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); -} - -.spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); -} - -.spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); -} diff --git a/packages/icon/src/spectrum-icon-chevron.css b/packages/icon/src/spectrum-icon-chevron.css index 604dd9a2f4..acf07d2c95 100644 --- a/packages/icon/src/spectrum-icon-chevron.css +++ b/packages/icon/src/spectrum-icon-chevron.css @@ -11,135 +11,32 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); -} - -.spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); -} - -.spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); -} - -.spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); -} - -.spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); -} - -.spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); -} - -.spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); -} - -.spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(90deg); -} - +.spectrum-UIIcon-ChevronDown100, +.spectrum-UIIcon-ChevronDown200, +.spectrum-UIIcon-ChevronDown300, +.spectrum-UIIcon-ChevronDown400, +.spectrum-UIIcon-ChevronDown50, +.spectrum-UIIcon-ChevronDown500, .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(90deg); -} - -.spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(180deg); + --spectrum-icon-transform: rotate(90deg); } +.spectrum-UIIcon-ChevronLeft100, +.spectrum-UIIcon-ChevronLeft200, +.spectrum-UIIcon-ChevronLeft300, +.spectrum-UIIcon-ChevronLeft400, +.spectrum-UIIcon-ChevronLeft50, +.spectrum-UIIcon-ChevronLeft500, .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(180deg); -} - -.spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - transform: rotate(270deg); + --spectrum-icon-transform: rotate(180deg); } +.spectrum-UIIcon-ChevronUp100, +.spectrum-UIIcon-ChevronUp200, +.spectrum-UIIcon-ChevronUp300, +.spectrum-UIIcon-ChevronUp400, +.spectrum-UIIcon-ChevronUp50, +.spectrum-UIIcon-ChevronUp500, .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - transform: rotate(270deg); -} - -.spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - transform: rotate(270deg); + --spectrum-icon-transform: rotate(270deg); } diff --git a/packages/icon/src/spectrum-icon-corner-triangle.css b/packages/icon/src/spectrum-icon-corner-triangle.css index 58ab2a3d7c..b1cee0dbcd 100644 --- a/packages/icon/src/spectrum-icon-corner-triangle.css +++ b/packages/icon/src/spectrum-icon-corner-triangle.css @@ -11,18 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); -} - -.spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); -} - -.spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); -} - -.spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); -} diff --git a/packages/icon/src/spectrum-icon-cross.css b/packages/icon/src/spectrum-icon-cross.css index ad2efc3ac2..b1cee0dbcd 100644 --- a/packages/icon/src/spectrum-icon-cross.css +++ b/packages/icon/src/spectrum-icon-cross.css @@ -11,30 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-75); -} - -.spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-100); -} - -.spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-200); -} - -.spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-300); -} - -.spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-400); -} - -.spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-500); -} - -.spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-600); -} diff --git a/packages/icon/src/spectrum-icon-dash.css b/packages/icon/src/spectrum-icon-dash.css index db9e05dd50..b1cee0dbcd 100644 --- a/packages/icon/src/spectrum-icon-dash.css +++ b/packages/icon/src/spectrum-icon-dash.css @@ -11,34 +11,3 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-50); -} - -.spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-75); -} - -.spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-100); -} - -.spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-200); -} - -.spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-300); -} - -.spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-400); -} - -.spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-500); -} - -.spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-600); -} diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index e28f581806..b52ba87ce3 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -12,56 +12,65 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-icon-inline-size: var( + pointer-events: none; + transform: none; + transform: var(--spectrum-icon-transform, none); + inline-size: var( --mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)) ); - --spectrum-icon-block-size: var( + block-size: var( --mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)) ); - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); + color: inherit; color: var(--mod-icon-color, inherit); fill: currentColor; - pointer-events: none; display: inline-block; } -:host(:not(:root)) { - overflow: hidden; +:host([size='xxs']), +:host([size='xxs']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxs); } -@media (forced-colors: active) { - :host { - forced-color-adjust: auto; - } +:host([size='xs']), +:host([size='xs']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xs); } -:host { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); +:host([size='s']), +:host([size='s']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-s); } -:host([size='xxs']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); +:host, +:host([size='m']), +:host([size='m']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-m); } -:host([size='xs']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); +:host([size='l']), +:host([size='l']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-l); } -:host([size='s']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); +:host([size='xl']), +:host([size='xl']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xl); } -:host([size='l']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); +:host([size='xxl']), +:host([size='xxl']) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxl); } -:host([size='xl']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); +:host(:not(:root)) { + overflow: hidden; } -:host([size='xxl']) { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); +@media (forced-colors: active) { + :host { + forced-color-adjust: auto; + } } diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index 2df580dd5f..b707e598cc 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -49,7 +49,7 @@ "@spectrum-web-components/iconset": "^0.47.2" }, "devDependencies": { - "@spectrum-css/ui-icons": "^1.1.2", + "@spectrum-css/ui-icons": "^2.0.0-s2-foundations.9", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index 0eb5b7d898..9554e2c13f 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -1,66 +1 @@ -{ - "name": "@spectrum-web-components/icons-workflow", - "version": "0.47.2", - "publishConfig": { - "access": "public" - }, - "description": "", - "license": "Apache-2.0", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-web-components.git", - "directory": "packages/icons-workflow" - }, - "author": "", - "homepage": "https://opensource.adobe.com/spectrum-web-components/components/icons-workflow", - "bugs": { - "url": "https://github.com/adobe/spectrum-web-components/issues" - }, - "main": "./src/index.js", - "module": "./src/index.js", - "type": "module", - "exports": { - ".": "./src/index.js", - "./src/*": "./src/*", - "./icons/*": "./icons/*", - "./package.json": "./package.json" - }, - "scripts": { - "build": "node ./bin/build @adobe/spectrum-css-workflow-icons/dist/18" - }, - "files": [ - "**/*.d.ts", - "**/*.js", - "**/*.js.map", - "!bin/", - "custom-elements.json", - "!stories/", - "!test/" - ], - "keywords": [ - "spectrum css", - "web components", - "lit-element", - "lit-html" - ], - "dependencies": { - "@spectrum-web-components/base": "^0.47.2", - "@spectrum-web-components/icon": "^0.47.2" - }, - "devDependencies": { - "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/icon": "^7.1.0", - "case": "^1.6.1", - "cheerio": "^1.0.0-rc.2", - "fast-glob": "^3.2.12", - "fs": "^0.0.1-security", - "path": "^0.12.7", - "prettier": "^3.0.0" - }, - "types": "./src/index.d.ts", - "customElements": "custom-elements.json", - "sideEffects": [ - "./src/index.js", - "./icons/*" - ] -} +{"name":"@spectrum-web-components/icons-workflow","version":"0.47.2","publishConfig":{"access":"public"},"description":"","license":"Apache-2.0","repository":{"type":"git","url":"https://github.com/adobe/spectrum-web-components.git","directory":"packages/icons-workflow"},"author":"","homepage":"https://opensource.adobe.com/spectrum-web-components/components/icons-workflow","bugs":{"url":"https://github.com/adobe/spectrum-web-components/issues"},"main":"./src/index.js","module":"./src/index.js","type":"module","exports":{".":"./src/index.js","./src/*":"./src/*","./icons/*":"./icons/*","./package.json":"./package.json"},"scripts":{"build":"node ./bin/build @adobe/spectrum-css-workflow-icons/dist/18"},"files":["**/*.d.ts","**/*.js","**/*.js.map","!bin/","custom-elements.json","!stories/","!test/"],"keywords":["spectrum css","web components","lit-element","lit-html"],"dependencies":{"@spectrum-web-components/base":"^0.47.2","@spectrum-web-components/icon":"^0.47.2"},"devDependencies":{"@adobe/spectrum-css-workflow-icons":"^1.5.4","@spectrum-css/icon":"^8.0.0-s2-foundations.15","case":"^1.6.1","cheerio":"^1.0.0-rc.2","fast-glob":"^3.2.12","fs":"^0.0.1-security","path":"^0.12.7","prettier":"^3.0.0"},"types":"./src/index.d.ts","customElements":"custom-elements.json","sideEffects":["./src/index.js","./icons/*"]} \ No newline at end of file diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index 08e64f7060..19bac85f0b 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -30,6 +30,7 @@ "default": "./src/IllustratedMessage.js" }, "./src/illustrated-message.css.js": "./src/illustrated-message.css.js", + "./src/illustratedmessage-overrides.css.js": "./src/illustratedmessage-overrides.css.js", "./src/index.js": { "development": "./src/index.dev.js", "default": "./src/index.js" @@ -61,7 +62,7 @@ "@spectrum-web-components/styles": "^0.47.2" }, "devDependencies": { - "@spectrum-css/illustratedmessage": "^7.1.0" + "@spectrum-css/illustratedmessage": "^8.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/illustrated-message/src/illustrated-message.css b/packages/illustrated-message/src/illustrated-message.css index 7328ba5a08..c7472908c1 100644 --- a/packages/illustrated-message/src/illustrated-message.css +++ b/packages/illustrated-message/src/illustrated-message.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-illustratedmessage.css'); +@import url('./illustratedmessage-overrides.css'); /* Ensure that SVGs with viewBox attributes size correctly. */ ::slotted(svg[viewBox]) { diff --git a/packages/illustrated-message/src/illustratedmessage-overrides.css b/packages/illustrated-message/src/illustratedmessage-overrides.css new file mode 100644 index 0000000000..fc8930c47b --- /dev/null +++ b/packages/illustrated-message/src/illustratedmessage-overrides.css @@ -0,0 +1,87 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-illustrated-message-description-max-inline-size: var( + --system-illustrated-message-description-max-inline-size + ); + --spectrum-illustrated-message-heading-max-inline-size: var( + --system-illustrated-message-heading-max-inline-size + ); + --spectrum-illustrated-message-title-to-heading: var( + --system-illustrated-message-title-to-heading + ); + --spectrum-illustrated-message-heading-to-description: var( + --system-illustrated-message-heading-to-description + ); + --spectrum-illustrated-message-illustration-color: var( + --system-illustrated-message-illustration-color + ); + --spectrum-illustrated-message-illustration-accent-color: var( + --system-illustrated-message-illustration-accent-color + ); + --spectrum-illustrated-message-title-font-family: var( + --system-illustrated-message-title-font-family + ); + --spectrum-illustrated-message-title-font-weight: var( + --system-illustrated-message-title-font-weight + ); + --spectrum-illustrated-message-title-font-style: var( + --system-illustrated-message-title-font-style + ); + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-title-font-size + ); + --spectrum-illustrated-message-title-line-height: var( + --system-illustrated-message-title-line-height + ); + --spectrum-illustrated-message-title-color: var( + --system-illustrated-message-title-color + ); + --spectrum-illustrated-message-description-font-family: var( + --system-illustrated-message-description-font-family + ); + --spectrum-illustrated-message-description-font-weight: var( + --system-illustrated-message-description-font-weight + ); + --spectrum-illustrated-message-description-font-style: var( + --system-illustrated-message-description-font-style + ); + --spectrum-illustrated-message-description-font-size: var( + --system-illustrated-message-description-font-size + ); + --spectrum-illustrated-message-description-line-height: var( + --system-illustrated-message-description-line-height + ); + --spectrum-illustrated-message-description-color: var( + --system-illustrated-message-description-color + ); +} + +:host:lang(ja) { + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-ja-title-font-size + ); +} + +:host:lang(zh) { + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-zh-title-font-size + ); +} + +:host:lang(ko) { + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-ko-title-font-size + ); +} diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css index c1b209929f..09dba3c683 100644 --- a/packages/illustrated-message/src/spectrum-illustratedmessage.css +++ b/packages/illustrated-message/src/spectrum-illustratedmessage.css @@ -11,69 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-illustrated-message-title-to-heading: var( - --spectrum-spacing-400 - ); - --spectrum-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --spectrum-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --spectrum-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --spectrum-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --spectrum-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --spectrum-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); - --spectrum-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --spectrum-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --spectrum-illustrated-message-description-color: var( - --spectrum-body-color - ); -} - -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); -} - @media (forced-colors: active) { :host { --highcontrast-illustrated-message-illustration-color: CanvasText; @@ -83,8 +20,10 @@ governing permissions and limitations under the License. :host { block-size: 100%; + display: flex; display: var(--mod-illustrated-message-display, flex); text-align: center; + pointer-events: auto; pointer-events: var(--mod-illustrated-message-pointer-events, auto); max-inline-size: var(--mod-illustrated-message-content-maximum-width); flex-direction: column; @@ -156,6 +95,7 @@ governing permissions and limitations under the License. #description { position: var(--mod-illustrated-message-description-position); z-index: var(--mod-illustrated-message-description-z-index); + pointer-events: auto; pointer-events: var( --mod-illustrated-message-description-pointer-events, auto diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index 26ac4d37be..6273943bbd 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/infield-button-overrides.css.js": "./src/infield-button-overrides.css.js", "./src/infield-button.css.js": "./src/infield-button.css.js", "./sp-infield-button.js": { "development": "./sp-infield-button.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/button": "^0.47.2" }, "devDependencies": { - "@spectrum-css/infieldbutton": "^5.1.0" + "@spectrum-css/infieldbutton": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css new file mode 100644 index 0000000000..8c05c2e2b2 --- /dev/null +++ b/packages/infield-button/src/infield-button-overrides.css @@ -0,0 +1,235 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-infield-button-border-width: var( + --system-infield-button-border-width + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-border-color + ); + --spectrum-infield-button-border-radius: var( + --system-infield-button-border-radius + ); + --spectrum-infield-button-border-radius-reset: var( + --system-infield-button-border-radius-reset + ); + --spectrum-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-stacked-top-border-radius-start-start + ); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-stacked-bottom-border-radius-end-start + ); + --spectrum-infield-button-background-color: var( + --system-infield-button-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-background-color-down + ); + --spectrum-infield-button-background-color-key-focus: var( + --system-infield-button-background-color-key-focus + ); + --spectrum-infield-button-height: var(--system-infield-button-height); + --spectrum-infield-button-width: var(--system-infield-button-width); + --spectrum-infield-button-stacked-border-radius-reset: var( + --system-infield-button-stacked-border-radius-reset + ); + --spectrum-infield-button-edge-to-fill: var( + --system-infield-button-edge-to-fill + ); + --spectrum-infield-button-inner-edge-to-fill: var( + --system-infield-button-inner-edge-to-fill + ); + --spectrum-infield-button-fill-padding: var( + --system-infield-button-fill-padding + ); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-stacked-fill-padding-inner + ); + --spectrum-infield-button-animation-duration: var( + --system-infield-button-animation-duration + ); + --spectrum-infield-button-icon-color: var( + --system-infield-button-icon-color + ); + --spectrum-infield-button-icon-color-hover: var( + --system-infield-button-icon-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --system-infield-button-icon-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --system-infield-button-icon-color-key-focus + ); + --spectrum-infield-button-fill-justify-content: var( + --system-infield-button-fill-justify-content + ); +} + +:host([disabled]) { + --spectrum-infield-button-background-color: var( + --system-infield-button-disabled-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-disabled-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-disabled-background-color-down + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-disabled-border-color + ); + --spectrum-infield-button-icon-color: var( + --system-infield-button-disabled-icon-color + ); + --spectrum-infield-button-icon-color-hover: var( + --system-infield-button-disabled-icon-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --system-infield-button-disabled-icon-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --system-infield-button-disabled-icon-color-key-focus + ); +} + +:host([size='s']) { + --spectrum-infield-button-height: var( + --system-infield-button-size-s-height + ); + --spectrum-infield-button-width: var(--system-infield-button-size-s-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-s-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-s-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-s-stacked-fill-padding-inner + ); +} + +:host([size='l']) { + --spectrum-infield-button-height: var( + --system-infield-button-size-l-height + ); + --spectrum-infield-button-width: var(--system-infield-button-size-l-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-l-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-l-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-l-stacked-fill-padding-inner + ); +} + +:host([size='xl']) { + --spectrum-infield-button-height: var( + --system-infield-button-size-xl-height + ); + --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-xl-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-xl-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-xl-stacked-fill-padding-inner + ); +} + +:host([block='start']) { + --spectrum-infield-button-width: var(--system-infield-button-top-width); +} + +:host([block='end']) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-width); +} + +:host([block='start'][size='s']) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-s-width + ); +} + +:host([block='end'][size='s']) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-s-width + ); +} + +:host([block='start'][size='l']) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-l-width + ); +} + +:host([block='end'][size='l']) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-l-width + ); +} + +:host([block='start'][size='xl']) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-xl-width + ); +} + +:host([block='end'][size='xl']) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-xl-width + ); +} + +:host([quiet]) { + --spectrum-infield-button-background-color: var( + --system-infield-button-quiet-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-quiet-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-quiet-background-color-down + ); + --spectrum-infield-button-background-color-key-focus: var( + --system-infield-button-quiet-background-color-key-focus + ); + --spectrum-infield-border-color: var( + --system-infield-button-quiet-infield-border-color + ); + --spectrum-infield-button-border-width: var( + --system-infield-button-quiet-border-width + ); +} + +:host([quiet][disabled]) { + --spectrum-infield-button-background-color: var( + --system-infield-button-quiet-disabled-background-color + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-quiet-disabled-border-color + ); +} diff --git a/packages/infield-button/src/infield-button.css b/packages/infield-button/src/infield-button.css index f630bddff9..d86f9176b0 100644 --- a/packages/infield-button/src/infield-button.css +++ b/packages/infield-button/src/infield-button.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-infield-button.css'); +@import url('./infield-button-overrides.css'); :host { box-sizing: border-box; diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index 2f9c7da1cb..3591774f80 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -11,193 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-infield-button-height: var(--spectrum-component-height-100); - --spectrum-infield-button-width: var(--spectrum-component-height-100); - --spectrum-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --spectrum-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --spectrum-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --spectrum-infield-button-fill-padding: 0px; - --spectrum-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-infield-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-infield-button-fill-justify-content: center; -} - -:host([disabled]) { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-border-color: var( - --mod-infield-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-infield-button-icon-color: var( - --mod-infield-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-hover: var( - --mod-infield-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-down: var( - --mod-infield-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-infield-button-icon-color-key-focus: var( - --mod-infield-button-icon-color-key-focus-disabled, - var(--spectrum-disabled-content-color) - ); -} - -:host([size='s']) { - --spectrum-infield-button-height: var(--spectrum-component-height-75); - --spectrum-infield-button-width: var(--spectrum-component-height-75); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); -} - -:host([size='l']) { - --spectrum-infield-button-height: var(--spectrum-component-height-200); - --spectrum-infield-button-width: var(--spectrum-component-height-200); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); -} - -:host([size='xl']) { - --spectrum-infield-button-height: var(--spectrum-component-height-300); - --spectrum-infield-button-width: var(--spectrum-component-height-300); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); -} - -:host([block='end']), -:host([block='start']) { - --mod-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-medium) - ); -} - -:host([block='end'][size='s']), -:host([block='start'][size='s']) { - --mod-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-small) - ); -} - -:host([block='end'][size='l']), -:host([block='start'][size='l']) { - --mod-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-large) - ); -} - -:host([block='end'][size='xl']), -:host([block='start'][size='xl']) { - --mod-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-extra-large) - ); -} - -:host([quiet]) { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-quiet, - transparent - ); - --mod-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-quiet, - transparent - ); - --mod-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-quiet, - transparent - ); - --mod-infield-button-background-color-key-focus: var( - --mod-infield-button-background-color-key-focus-quiet, - transparent - ); - --mod-infield-border-color: var( - --mod-infield-border-color-quiet, - transparent - ); - --mod-infield-button-border-width: var( - --mod-infield-button-border-width-quiet, - 0 - ); -} - -:host([quiet][disabled]) { - --mod-infield-button-background-color: var( - --mod-infield-button-background-color-quiet-disabled, - transparent - ); - --mod-infield-button-border-color: var( - --mod-infield-button-border-color-quiet-disabled, - transparent - ); -} - @media (forced-colors: active) { :host(:is(:active, [active])):not(:disabled), :host(:focus-visible):not(:disabled) { @@ -302,7 +115,109 @@ governing permissions and limitations under the License. ); } +:host([block='end']), +:host([block='start']) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-medium) + ); +} + +:host([block='end'][size='s']), +:host([block='start'][size='s']) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-small) + ); +} + +:host([block='end'][size='l']), +:host([block='start'][size='l']) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-large) + ); +} + +:host([block='end'][size='xl']), +:host([block='start'][size='xl']) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); +} + +:host([quiet]) { + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-quiet, + transparent + ); + --spectrum-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-quiet, + transparent + ); + --spectrum-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-quiet, + transparent + ); + --spectrum-infield-button-background-color-key-focus: var( + --mod-infield-button-background-color-key-focus-quiet, + transparent + ); + --spectrum-infield-border-color: var( + --mod-infield-border-color-quiet, + transparent + ); + --spectrum-infield-button-border-width: var( + --mod-infield-button-border-width-quiet, + 0 + ); +} + +:host([quiet][disabled]) { + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-quiet-disabled, + transparent + ); + --spectrum-infield-button-border-color: var( + --mod-infield-button-border-color-quiet-disabled, + transparent + ); +} + :host([disabled]) { + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-border-color: var( + --mod-infield-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-icon-color: var( + --mod-infield-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-hover: var( + --mod-infield-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-down: var( + --mod-infield-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-key-focus: var( + --mod-infield-button-icon-color-key-focus-disabled, + var(--spectrum-disabled-content-color) + ); cursor: auto; } @@ -360,8 +275,6 @@ governing permissions and limitations under the License. --mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content) ); - transition: border-color var(--spectrum-global-animation-duration-100) - ease-in-out; display: flex; } @@ -522,36 +435,3 @@ governing permissions and limitations under the License. flex-shrink: 0; margin: 0 !important; } - -:host { - --spectrum-infield-button-border-width: var( - --system-spectrum-infieldbutton-spectrum-infield-button-border-width - ); - --spectrum-infield-button-border-color: var( - --system-spectrum-infieldbutton-spectrum-infield-button-border-color - ); - --spectrum-infield-button-border-radius: var( - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius - ); - --spectrum-infield-button-border-radius-reset: var( - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset - ); - --spectrum-infield-button-stacked-top-border-radius-start-start: var( - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start - ); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start - ); - --spectrum-infield-button-background-color: var( - --system-spectrum-infieldbutton-spectrum-infield-button-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down - ); - --spectrum-infield-button-background-color-key-focus: var( - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus - ); -} diff --git a/packages/infield-button/stories/index.ts b/packages/infield-button/stories/index.ts index c27a516e50..db122aeb25 100644 --- a/packages/infield-button/stories/index.ts +++ b/packages/infield-button/stories/index.ts @@ -16,10 +16,12 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js'; import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; document.adoptedStyleSheets = [ ...document.adoptedStyleSheets, chevronStyles.styleSheet as CSSStyleSheet, + chevronIconOverrides.styleSheet as CSSStyleSheet, ]; export type StoryArgs = { @@ -128,15 +130,11 @@ export const Template = ({ `; }; -export const chevronUp = (): TemplateResult => - html` - - `; -export const chevronDown = (): TemplateResult => - html` - - `; +export const chevronUp = (): TemplateResult => html` + +`; +export const chevronDown = (): TemplateResult => html` + +`; diff --git a/packages/link/package.json b/packages/link/package.json index bae525b970..fb1024f406 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/link-overrides.css.js": "./src/link-overrides.css.js", "./src/link.css.js": "./src/link.css.js", "./sp-link.js": { "development": "./sp-link.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/link": "^5.1.0" + "@spectrum-css/link": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/link/src/link-overrides.css b/packages/link/src/link-overrides.css new file mode 100644 index 0000000000..ea14dbd0a0 --- /dev/null +++ b/packages/link/src/link-overrides.css @@ -0,0 +1,42 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-link-animation-duration: var(--system-link-animation-duration); + --spectrum-link-text-color-primary-default: var( + --system-link-text-color-primary-default + ); + --spectrum-link-text-color-primary-hover: var( + --system-link-text-color-primary-hover + ); + --spectrum-link-text-color-primary-active: var( + --system-link-text-color-primary-active + ); + --spectrum-link-text-color-primary-focus: var( + --system-link-text-color-primary-focus + ); + --spectrum-link-text-color-secondary-default: var( + --system-link-text-color-secondary-default + ); + --spectrum-link-text-color-secondary-hover: var( + --system-link-text-color-secondary-hover + ); + --spectrum-link-text-color-secondary-active: var( + --system-link-text-color-secondary-active + ); + --spectrum-link-text-color-secondary-focus: var( + --system-link-text-color-secondary-focus + ); + --spectrum-link-text-color-white: var(--system-link-text-color-white); + --spectrum-link-text-color-black: var(--system-link-text-color-black); +} diff --git a/packages/link/src/link.css b/packages/link/src/link.css index f63b78e718..8f68a7e119 100644 --- a/packages/link/src/link.css +++ b/packages/link/src/link.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-link.css'); +@import url('./link-overrides.css'); :host { display: inline; diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index b0ab639942..081df6cf81 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -11,36 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-link-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --spectrum-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --spectrum-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --spectrum-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --spectrum-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --spectrum-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-link-text-color-white: var(--spectrum-white); - --spectrum-link-text-color-black: var(--spectrum-black); -} - @media (forced-colors: active) { :host { --highcontrast-link-text-color-primary-default: LinkText; @@ -99,6 +69,7 @@ a:focus-visible { ); -webkit-text-decoration: underline double; text-decoration: underline double; + text-decoration-color: inherit; text-decoration-color: var(--highcontrast-link-focus-color, inherit); } diff --git a/packages/menu/package.json b/packages/menu/package.json index e28990887e..2582b69f96 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -41,13 +41,18 @@ "development": "./src/MenuItem.dev.js", "default": "./src/MenuItem.js" }, + "./src/checkmark-overrides.css.js": "./src/checkmark-overrides.css.js", + "./src/chevron-overrides.css.js": "./src/chevron-overrides.css.js", "./src/index.js": { "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/menu-divider-overrides.css.js": "./src/menu-divider-overrides.css.js", "./src/menu-divider.css.js": "./src/menu-divider.css.js", "./src/menu-group.css.js": "./src/menu-group.css.js", + "./src/menu-item-overrides.css.js": "./src/menu-item-overrides.css.js", "./src/menu-item.css.js": "./src/menu-item.css.js", + "./src/menu-overrides.css.js": "./src/menu-overrides.css.js", "./src/menu.css.js": "./src/menu.css.js", "./sp-menu.js": { "development": "./sp-menu.dev.js", @@ -96,7 +101,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/menu": "^7.1.4" + "@spectrum-css/menu": "^8.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index cc596281e1..75c955c946 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -32,10 +32,12 @@ import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js'; import menuItemStyles from './menu-item.css.js'; import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js'; +import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js'; import type { Menu } from './Menu.js'; import { MutationController } from '@lit-labs/observers/mutation-controller.js'; import type { Overlay } from '@spectrum-web-components/overlay'; @@ -95,7 +97,13 @@ export class MenuItem extends LikeAnchor( ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]')) ) { public static override get styles(): CSSResultArray { - return [menuItemStyles, checkmarkStyles, chevronStyles]; + return [ + menuItemStyles, + checkmarkStyles, + checkmarkSmallOverrides, + chevronStyles, + chevronIconOverrides, + ]; } abortControllerSubmenu!: AbortController; diff --git a/packages/menu/src/checkmark-overrides.css b/packages/menu/src/checkmark-overrides.css new file mode 100644 index 0000000000..cf97324853 --- /dev/null +++ b/packages/menu/src/checkmark-overrides.css @@ -0,0 +1,195 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Menu { + --spectrum-menu-item-min-height: var(--system-menu-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-item-top-to-checkmark + ); + --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); + --spectrum-menu-item-top-to-checkbox: var( + --system-menu-item-top-to-checkbox + ); + --spectrum-menu-item-label-line-height: var( + --system-menu-item-label-line-height + ); + --spectrum-menu-item-label-line-height-cjk: var( + --system-menu-item-label-line-height-cjk + ); + --spectrum-menu-item-label-to-description-spacing: var( + --system-menu-item-label-to-description-spacing + ); + --spectrum-menu-item-focus-indicator-width: var( + --system-menu-item-focus-indicator-width + ); + --spectrum-menu-item-focus-indicator-color: var( + --system-menu-item-focus-indicator-color + ); + --spectrum-menu-item-label-to-value-area-min-spacing: var( + --system-menu-item-label-to-value-area-min-spacing + ); + --spectrum-menu-item-label-content-color-default: var( + --system-menu-item-label-content-color-default + ); + --spectrum-menu-item-label-content-color-hover: var( + --system-menu-item-label-content-color-hover + ); + --spectrum-menu-item-label-content-color-down: var( + --system-menu-item-label-content-color-down + ); + --spectrum-menu-item-label-content-color-focus: var( + --system-menu-item-label-content-color-focus + ); + --spectrum-menu-item-label-icon-color-default: var( + --system-menu-item-label-icon-color-default + ); + --spectrum-menu-item-label-icon-color-hover: var( + --system-menu-item-label-icon-color-hover + ); + --spectrum-menu-item-label-icon-color-down: var( + --system-menu-item-label-icon-color-down + ); + --spectrum-menu-item-label-icon-color-focus: var( + --system-menu-item-label-icon-color-focus + ); + --spectrum-menu-item-label-content-color-disabled: var( + --system-menu-item-label-content-color-disabled + ); + --spectrum-menu-item-label-icon-color-disabled: var( + --system-menu-item-label-icon-color-disabled + ); + --spectrum-menu-item-description-line-height: var( + --system-menu-item-description-line-height + ); + --spectrum-menu-item-description-line-height-cjk: var( + --system-menu-item-description-line-height-cjk + ); + --spectrum-menu-item-description-color-default: var( + --system-menu-item-description-color-default + ); + --spectrum-menu-item-description-color-hover: var( + --system-menu-item-description-color-hover + ); + --spectrum-menu-item-description-color-down: var( + --system-menu-item-description-color-down + ); + --spectrum-menu-item-description-color-focus: var( + --system-menu-item-description-color-focus + ); + --spectrum-menu-item-description-color-disabled: var( + --system-menu-item-description-color-disabled + ); + --spectrum-menu-section-header-line-height: var( + --system-menu-section-header-line-height + ); + --spectrum-menu-section-header-line-height-cjk: var( + --system-menu-section-header-line-height-cjk + ); + --spectrum-menu-section-header-font-weight: var( + --system-menu-section-header-font-weight + ); + --spectrum-menu-section-header-color: var( + --system-menu-section-header-color + ); + --spectrum-menu-collapsible-icon-color: var( + --system-menu-collapsible-icon-color + ); + --spectrum-menu-checkmark-icon-color-default: var( + --system-menu-checkmark-icon-color-default + ); + --spectrum-menu-checkmark-icon-color-hover: var( + --system-menu-checkmark-icon-color-hover + ); + --spectrum-menu-checkmark-icon-color-down: var( + --system-menu-checkmark-icon-color-down + ); + --spectrum-menu-checkmark-icon-color-focus: var( + --system-menu-checkmark-icon-color-focus + ); + --spectrum-menu-drillin-icon-color-default: var( + --system-menu-drillin-icon-color-default + ); + --spectrum-menu-drillin-icon-color-hover: var( + --system-menu-drillin-icon-color-hover + ); + --spectrum-menu-drillin-icon-color-down: var( + --system-menu-drillin-icon-color-down + ); + --spectrum-menu-drillin-icon-color-focus: var( + --system-menu-drillin-icon-color-focus + ); + --spectrum-menu-item-value-color-default: var( + --system-menu-item-value-color-default + ); + --spectrum-menu-item-value-color-hover: var( + --system-menu-item-value-color-hover + ); + --spectrum-menu-item-value-color-down: var( + --system-menu-item-value-color-down + ); + --spectrum-menu-item-value-color-focus: var( + --system-menu-item-value-color-focus + ); + --spectrum-menu-checkmark-display-hidden: var( + --system-menu-checkmark-display-hidden + ); + --spectrum-menu-checkmark-display-shown: var( + --system-menu-checkmark-display-shown + ); + --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); + --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); + --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: var( + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start + ); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var( + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start + ); +} diff --git a/packages/menu/src/chevron-overrides.css b/packages/menu/src/chevron-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/menu/src/chevron-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/menu/src/menu-divider-overrides.css b/packages/menu/src/menu-divider-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/menu/src/menu-divider-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/menu/src/menu-divider.css b/packages/menu/src/menu-divider.css index 98a598ab08..cadcc39432 100644 --- a/packages/menu/src/menu-divider.css +++ b/packages/menu/src/menu-divider.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-menu-divider.css'); +@import url('./menu-divider-overrides.css'); :host { display: block; diff --git a/packages/menu/src/menu-item-overrides.css b/packages/menu/src/menu-item-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/menu/src/menu-item-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css index 6f6ad074e0..e8328be087 100644 --- a/packages/menu/src/menu-item.css +++ b/packages/menu/src/menu-item.css @@ -13,6 +13,7 @@ governing permissions and limitations under the License. @import url('./spectrum-checkmark.css'); @import url('./spectrum-chevron.css'); @import url('./spectrum-menu-item.css'); +@import url('./menu-item-overrides.css'); :host([hidden]) { display: none; diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css new file mode 100644 index 0000000000..8113ca4079 --- /dev/null +++ b/packages/menu/src/menu-overrides.css @@ -0,0 +1,407 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); + --spectrum-menu-item-top-to-checkbox: var( + --system-menu-item-top-to-checkbox + ); + --spectrum-menu-item-label-line-height: var( + --system-menu-item-label-line-height + ); + --spectrum-menu-item-label-line-height-cjk: var( + --system-menu-item-label-line-height-cjk + ); + --spectrum-menu-item-label-to-description-spacing: var( + --system-menu-item-label-to-description-spacing + ); + --spectrum-menu-item-focus-indicator-width: var( + --system-menu-item-focus-indicator-width + ); + --spectrum-menu-item-focus-indicator-color: var( + --system-menu-item-focus-indicator-color + ); + --spectrum-menu-item-label-to-value-area-min-spacing: var( + --system-menu-item-label-to-value-area-min-spacing + ); + --spectrum-menu-item-label-content-color-default: var( + --system-menu-item-label-content-color-default + ); + --spectrum-menu-item-label-content-color-hover: var( + --system-menu-item-label-content-color-hover + ); + --spectrum-menu-item-label-content-color-down: var( + --system-menu-item-label-content-color-down + ); + --spectrum-menu-item-label-content-color-focus: var( + --system-menu-item-label-content-color-focus + ); + --spectrum-menu-item-label-icon-color-default: var( + --system-menu-item-label-icon-color-default + ); + --spectrum-menu-item-label-icon-color-hover: var( + --system-menu-item-label-icon-color-hover + ); + --spectrum-menu-item-label-icon-color-down: var( + --system-menu-item-label-icon-color-down + ); + --spectrum-menu-item-label-icon-color-focus: var( + --system-menu-item-label-icon-color-focus + ); + --spectrum-menu-item-label-content-color-disabled: var( + --system-menu-item-label-content-color-disabled + ); + --spectrum-menu-item-label-icon-color-disabled: var( + --system-menu-item-label-icon-color-disabled + ); + --spectrum-menu-item-description-line-height: var( + --system-menu-item-description-line-height + ); + --spectrum-menu-item-description-line-height-cjk: var( + --system-menu-item-description-line-height-cjk + ); + --spectrum-menu-item-description-color-default: var( + --system-menu-item-description-color-default + ); + --spectrum-menu-item-description-color-hover: var( + --system-menu-item-description-color-hover + ); + --spectrum-menu-item-description-color-down: var( + --system-menu-item-description-color-down + ); + --spectrum-menu-item-description-color-focus: var( + --system-menu-item-description-color-focus + ); + --spectrum-menu-item-description-color-disabled: var( + --system-menu-item-description-color-disabled + ); + --spectrum-menu-section-header-line-height: var( + --system-menu-section-header-line-height + ); + --spectrum-menu-section-header-line-height-cjk: var( + --system-menu-section-header-line-height-cjk + ); + --spectrum-menu-section-header-font-weight: var( + --system-menu-section-header-font-weight + ); + --spectrum-menu-section-header-color: var( + --system-menu-section-header-color + ); + --spectrum-menu-collapsible-icon-color: var( + --system-menu-collapsible-icon-color + ); + --spectrum-menu-checkmark-icon-color-default: var( + --system-menu-checkmark-icon-color-default + ); + --spectrum-menu-checkmark-icon-color-hover: var( + --system-menu-checkmark-icon-color-hover + ); + --spectrum-menu-checkmark-icon-color-down: var( + --system-menu-checkmark-icon-color-down + ); + --spectrum-menu-checkmark-icon-color-focus: var( + --system-menu-checkmark-icon-color-focus + ); + --spectrum-menu-drillin-icon-color-default: var( + --system-menu-drillin-icon-color-default + ); + --spectrum-menu-drillin-icon-color-hover: var( + --system-menu-drillin-icon-color-hover + ); + --spectrum-menu-drillin-icon-color-down: var( + --system-menu-drillin-icon-color-down + ); + --spectrum-menu-drillin-icon-color-focus: var( + --system-menu-drillin-icon-color-focus + ); + --spectrum-menu-item-value-color-default: var( + --system-menu-item-value-color-default + ); + --spectrum-menu-item-value-color-hover: var( + --system-menu-item-value-color-hover + ); + --spectrum-menu-item-value-color-down: var( + --system-menu-item-value-color-down + ); + --spectrum-menu-item-value-color-focus: var( + --system-menu-item-value-color-focus + ); + --spectrum-menu-checkmark-display-hidden: var( + --system-menu-checkmark-display-hidden + ); + --spectrum-menu-checkmark-display-shown: var( + --system-menu-checkmark-display-shown + ); + --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); + --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: var( + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start + ); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var( + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start + ); + --spectrum-menu-item-background-color-default: var( + --system-menu-item-background-color-default + ); + --spectrum-menu-item-background-color-hover: var( + --system-menu-item-background-color-hover + ); + --spectrum-menu-item-background-color-down: var( + --system-menu-item-background-color-down + ); + --spectrum-menu-item-background-color-key-focus: var( + --system-menu-item-background-color-key-focus + ); + --spectrum-menu-item-min-height: var(--system-menu-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); +} + +:host([size='s']) { + --spectrum-menu-item-min-height: var(--system-menu-size-s-item-min-height); + --spectrum-menu-item-icon-height: var( + --system-menu-size-s-item-icon-height + ); + --spectrum-menu-item-icon-width: var(--system-menu-size-s-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-s-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-s-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-s-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-s-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-s-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-s-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-s-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-s-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-s-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-s-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-s-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-s-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-s-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var( + --system-menu-size-s-back-icon-margin + ); +} + +:host { + --spectrum-menu-item-min-height: var(--system-menu-size-m-item-min-height); + --spectrum-menu-item-icon-height: var( + --system-menu-size-m-item-icon-height + ); + --spectrum-menu-item-icon-width: var(--system-menu-size-m-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-m-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-m-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-m-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-m-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-m-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-m-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-m-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-m-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-m-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-m-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-m-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-m-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-m-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var( + --system-menu-size-m-back-icon-margin + ); +} + +:host([size='l']) { + --spectrum-menu-item-min-height: var(--system-menu-size-l-item-min-height); + --spectrum-menu-item-icon-height: var( + --system-menu-size-l-item-icon-height + ); + --spectrum-menu-item-icon-width: var(--system-menu-size-l-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-l-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-l-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-l-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-l-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-l-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-l-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-l-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-l-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-l-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-l-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-l-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-l-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-l-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var( + --system-menu-size-l-back-icon-margin + ); +} + +:host([size='xl']) { + --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); + --spectrum-menu-item-icon-height: var( + --system-menu-size-xl-item-icon-height + ); + --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-xl-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-xl-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-xl-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-xl-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-xl-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-xl-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-xl-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-xl-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-xl-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-xl-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-xl-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-xl-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-xl-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var( + --system-menu-size-xl-back-icon-margin + ); +} diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css index a2b1a41a48..04ae6fb23b 100644 --- a/packages/menu/src/menu.css +++ b/packages/menu/src/menu.css @@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +@import url('./menu-overrides.css'); @import url('./spectrum-menu.css'); :host { diff --git a/packages/menu/src/spectrum-checkmark.css b/packages/menu/src/spectrum-checkmark.css index 1f229d2c41..ba4415e974 100644 --- a/packages/menu/src/spectrum-checkmark.css +++ b/packages/menu/src/spectrum-checkmark.css @@ -16,6 +16,14 @@ governing permissions and limitations under the License. --mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display) ); + block-size: var( + --mod-menu-item-checkmark-height, + var(--spectrum-menu-item-checkmark-height) + ); + inline-size: var( + --mod-menu-item-checkmark-width, + var(--spectrum-menu-item-checkmark-width) + ); fill: var( --highcontrast-menu-checkmark-icon-color-default, var( @@ -31,7 +39,22 @@ governing permissions and limitations under the License. ) ); opacity: 1; - align-self: center; + grid-area: checkmarkArea; + align-self: start; + margin-block-start: calc( + var( + --mod-menu-item-top-to-checkmark, + var(--spectrum-menu-item-top-to-checkmark) + ) - + var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ) + ); + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); } .spectrum-Menu-back:focus-visible { @@ -40,8 +63,7 @@ governing permissions and limitations under the License. var( --mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) * 1 ) 0 0 0 var( @@ -51,41 +73,36 @@ governing permissions and limitations under the License. var(--spectrum-menu-item-focus-indicator-color) ) ); -} - -.checkmark { - block-size: var( - --mod-menu-item-checkmark-height, - var(--spectrum-menu-item-checkmark-height) - ); - inline-size: var( - --mod-menu-item-checkmark-width, - var(--spectrum-menu-item-checkmark-width) - ); - grid-area: checkmarkArea; - align-self: start; - margin-block-start: calc( + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 var( - --mod-menu-item-top-to-checkmark, - var(--spectrum-menu-item-top-to-checkmark) - ) - + --highcontrast-menu-item-focus-indicator-color, var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) ) - ); - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + ); } .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -132,22 +149,3 @@ governing permissions and limitations under the License. ); display: block; } - -.spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); - color: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); -} diff --git a/packages/menu/src/spectrum-chevron.css b/packages/menu/src/spectrum-chevron.css index f070573197..a5bc182cb7 100644 --- a/packages/menu/src/spectrum-chevron.css +++ b/packages/menu/src/spectrum-chevron.css @@ -11,7 +11,38 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.chevron { + block-size: var(--spectrum-menu-item-checkmark-height); + inline-size: var(--spectrum-menu-item-checkmark-width); + grid-area: chevronArea; + align-self: center; + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); +} + +.chevron:dir(rtl), +:host([dir='rtl']) .chevron { + transform: rotate(-180deg); +} + .spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); box-shadow: inset calc( var( @@ -30,28 +61,18 @@ governing permissions and limitations under the License. ); } -.chevron { - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); - grid-area: chevronArea; - align-self: center; - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); -} - -.chevron:dir(rtl), -:host([dir='rtl']) .chevron { - transform: rotate(-180deg); -} - .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -98,22 +119,3 @@ governing permissions and limitations under the License. ); display: block; } - -.spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); - color: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); -} diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js index 47c8841e4e..fa95a65473 100644 --- a/packages/menu/src/spectrum-config.js +++ b/packages/menu/src/spectrum-config.js @@ -79,6 +79,20 @@ const config = { builder.class('spectrum-Menu-item'), ], ], + includeByWholeSelector: [ + [ + /** .spectrum-Menu .spectrum-Menu-itemIcon */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-itemIcon'), + ], + [ + /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-itemIcon--workflowIcon'), + ], + ], components: [ converter.classToHost('spectrum-Menu-item'), converter.classToAttribute('is-disabled', 'disabled'), @@ -126,6 +140,34 @@ const config = { 'has-submenu' ), converter.classToSlotted('spectrum-Icon', 'icon'), + { + collapseSelector: true, + find: [ + /** .spectrum-Menu .spectrum-Menu-itemIcon */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-itemIcon'), + ], + replace: [ + { + replace: builder.slotted('icon'), + }, + ], + }, + { + collapseSelector: true, + find: [ + /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-itemIcon--workflowIcon'), + ], + replace: [ + { + replace: builder.slotted('icon'), + }, + ], + }, converter.classToSlotted('spectrum-Menu-itemIcon', 'icon'), converter.classToSlotted( 'spectrum-Menu-itemIcon--workflowIcon', @@ -349,12 +391,34 @@ const config = { regex: /spectrum-Menu-item/, }, ], + includeByWholeSelector: [ + [ + /** .spectrum-Menu .spectrum-Menu-checkmark */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-checkmark'), + ], + ], components: [ converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), converter.classToClass( 'spectrum-Menu-checkmark--withAdjacentIcon', 'checkmark--withAdjacentIcon' ), + { + collapseSelector: true, + find: [ + /** .spectrum-Menu .spectrum-Menu-checkmark */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-checkmark'), + ], + replace: [ + { + replace: builder.class('checkmark'), + }, + ], + }, ], }, { @@ -383,12 +447,34 @@ const config = { regex: /spectrum-Menu-item/, }, ], + includeByWholeSelector: [ + [ + /** .spectrum-Menu .spectrum-Menu-chevron */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-chevron'), + ], + ], components: [ converter.classToClass('spectrum-Menu-chevron', 'chevron'), converter.classToClass( 'spectrum-Menu-chevron--withAdjacentIcon', 'chevron--withAdjacentIcon' ), + { + collapseSelector: true, + find: [ + /** .spectrum-Menu .spectrum-Menu-checkmark */ + builder.class('spectrum-Menu'), + builder.combinator(' '), + builder.class('spectrum-Menu-chevron'), + ], + replace: [ + { + replace: builder.class('chevron'), + }, + ], + }, ], }, { diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index c20e5f6097..b3b061edeb 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -32,6 +32,21 @@ governing permissions and limitations under the License. } .spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); box-shadow: inset calc( var( @@ -51,11 +66,17 @@ governing permissions and limitations under the License. } .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -102,22 +123,3 @@ governing permissions and limitations under the License. ); display: block; } - -.spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); - color: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); -} diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 96d0320f82..3338ddfc97 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -26,29 +26,20 @@ governing permissions and limitations under the License. var(--spectrum-menu-item-label-icon-color-default) ) ); + grid-area: iconArea; + align-self: start; } -.checkmark { - display: var( - --mod-menu-checkmark-display, - var(--spectrum-menu-checkmark-display) - ); - fill: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) +::slotted([slot='icon']) { + margin-inline-end: var( + --mod-menu-item-label-text-to-visual, + var(--spectrum-menu-item-label-text-to-visual) ); - opacity: 1; - align-self: center; +} + +.chevron:dir(rtl), +:host([dir='rtl']) .chevron { + transform: rotate(-180deg); } :host { @@ -237,6 +228,21 @@ governing permissions and limitations under the License. :host([focused]) .spectrum-Menu-back, :host([focused]) { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); box-shadow: inset calc( var( @@ -351,11 +357,6 @@ governing permissions and limitations under the License. ); } -::slotted([slot='icon']) { - grid-area: iconArea; - align-self: start; -} - .spectrum-Menu-item--collapsible ::slotted([slot='icon']) { grid-area: headingIconArea; } @@ -368,16 +369,13 @@ governing permissions and limitations under the License. grid-area: checkmarkArea; } -.checkmark { - grid-area: checkmarkArea; - align-self: start; -} - .spectrum-Menu-itemSelection { grid-area: selectedArea; } #label { + --spectrum-switch-control-label-spacing: 0; + --spectrum-switch-spacing-top-to-label: 0; font-size: var( --mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size) @@ -405,13 +403,6 @@ governing permissions and limitations under the License. ); } -.chevron { - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); - grid-area: chevronArea; - align-self: center; -} - .spectrum-Menu-item--collapsible .chevron { grid-area: chevronAreaCollapsible; } @@ -424,56 +415,6 @@ governing permissions and limitations under the License. grid-area: chevronAreaDrillIn; } -.icon:not(.chevron, .checkmark) { - block-size: var( - --mod-menu-item-icon-height, - var(--spectrum-menu-item-icon-height) - ); - inline-size: var( - --mod-menu-item-icon-width, - var(--spectrum-menu-item-icon-width) - ); -} - -.checkmark { - block-size: var( - --mod-menu-item-checkmark-height, - var(--spectrum-menu-item-checkmark-height) - ); - inline-size: var( - --mod-menu-item-checkmark-width, - var(--spectrum-menu-item-checkmark-width) - ); - margin-block-start: calc( - var( - --mod-menu-item-top-to-checkmark, - var(--spectrum-menu-item-top-to-checkmark) - ) - - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); -} - -::slotted([slot='icon']) { - margin-inline-end: var( - --mod-menu-item-label-text-to-visual, - var(--spectrum-menu-item-label-text-to-visual) - ); -} - -.chevron { - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); -} - [name='description']::slotted(*) { color: var( --highcontrast-menu-item-color-default, @@ -564,11 +505,6 @@ governing permissions and limitations under the License. ); } -.chevron:dir(rtl), -:host([dir='rtl']) .chevron { - transform: rotate(-180deg); -} - :host([has-submenu]) .chevron { fill: var( --highcontrast-menu-item-color-default, @@ -718,14 +654,14 @@ governing permissions and limitations under the License. :host([disabled]) ::slotted([slot='icon']), :host([aria-disabled='true']) ::slotted([slot='icon']) { - fill: var( + color: var( --highcontrast-menu-item-color-disabled, var( --mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled) ) ); - color: var( + fill: var( --highcontrast-menu-item-color-disabled, var( --mod-menu-item-label-icon-color-disabled, @@ -885,14 +821,14 @@ governing permissions and limitations under the License. :host([disabled]:hover) ::slotted([slot='icon']), :host([aria-disabled='true']:hover) ::slotted([slot='icon']) { - fill: var( + color: var( --highcontrast-menu-item-color-disabled, var( --mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled) ) ); - color: var( + fill: var( --highcontrast-menu-item-color-disabled, var( --mod-menu-item-label-icon-color-disabled, @@ -903,11 +839,17 @@ governing permissions and limitations under the License. } .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -954,22 +896,3 @@ governing permissions and limitations under the License. ); display: block; } - -.spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); - color: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); -} diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index 6869ca04e1..4353e1d6ea 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -12,6 +12,21 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); box-shadow: inset calc( var( @@ -77,11 +92,17 @@ governing permissions and limitations under the License. } .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -132,22 +153,3 @@ governing permissions and limitations under the License. ); display: block; } - -.spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); - color: var( - --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) - ); -} diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index 2c0c4a664b..c65a52f8c9 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -11,297 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --spectrum-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --spectrum-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --spectrum-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); - --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --spectrum-menu-item-focus-indicator-width: var( - --spectrum-border-width-200 - ); - --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --spectrum-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-menu-item-description-line-height: var( - --spectrum-line-height-100 - ); - --spectrum-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --spectrum-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --spectrum-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); - --spectrum-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-menu-section-header-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-menu-section-header-color: var(--spectrum-gray-900); - --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); - --spectrum-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-menu-checkmark-icon-color-hover: var( - --spectrum-accent-color-1000 - ); - --spectrum-menu-checkmark-icon-color-down: var( - --spectrum-accent-color-1100 - ); - --spectrum-menu-checkmark-icon-color-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --spectrum-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --spectrum-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --spectrum-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --spectrum-menu-checkmark-display-hidden: none; - --spectrum-menu-checkmark-display-shown: block; - --spectrum-menu-checkmark-display: var( - --spectrum-menu-checkmark-display-shown - ); - --spectrum-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc( - var(--spectrum-menu-item-label-inline-edge-to-content) + - var(--spectrum-menu-item-checkmark-width) + - var(--spectrum-menu-item-text-to-control) + - var(--spectrum-menu-item-icon-width) + - var(--spectrum-menu-item-label-text-to-visual) + - var(--spectrum-menu-item-focus-indicator-width) - ); - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc( - var(--spectrum-menu-item-label-inline-edge-to-content) + - var(--spectrum-menu-item-checkmark-width) + - var(--spectrum-menu-item-label-text-to-visual) + - var(--spectrum-menu-item-focus-indicator-width) - ); -} - -:host([size='s']) { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var( - --spectrum-component-height-75 - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --spectrum-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --spectrum-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --spectrum-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --spectrum-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); -} - -:host([size='l']) { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var( - --spectrum-component-height-200 - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --spectrum-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --spectrum-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --spectrum-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --spectrum-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); -} - -:host([size='xl']) { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --spectrum-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var( - --spectrum-component-height-300 - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --spectrum-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --spectrum-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --spectrum-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --spectrum-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); -} - @media (forced-colors: active) { :host { --highcontrast-menu-item-background-color-default: ButtonFace; @@ -324,6 +33,7 @@ governing permissions and limitations under the License. } :host { + inline-size: auto; inline-size: var(--mod-menu-inline-size, auto); box-sizing: border-box; margin: 0; @@ -371,6 +81,21 @@ governing permissions and limitations under the License. } .spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); box-shadow: inset calc( var( @@ -436,11 +161,17 @@ governing permissions and limitations under the License. } .spectrum-Menu-back { + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); padding-inline: var(--mod-menu-back-padding-inline-start, 0) var( --mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content) ); + padding-block: 0; padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); flex-flow: wrap; @@ -503,10 +234,16 @@ governing permissions and limitations under the License. ); fill: var( --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) + var( + --mod-menu-back-icon-color-default, + var(--spectrum-menu-section-header-color) + ) ); color: var( --highcontrast-menu-item-color-default, - var(--mod-menu-back-icon-color-default) + var( + --mod-menu-back-icon-color-default, + var(--spectrum-menu-section-header-color) + ) ); } diff --git a/packages/meter/package.json b/packages/meter/package.json index 1840601022..03bcc6e71b 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/meter-overrides.css.js": "./src/meter-overrides.css.js", "./src/meter.css.js": "./src/meter.css.js", "./sp-meter.js": { "development": "./sp-meter.dev.js", @@ -63,7 +64,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/progressbar": "^4.1.5" + "@spectrum-css/progressbar": "^5.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css new file mode 100644 index 0000000000..11268d4d32 --- /dev/null +++ b/packages/meter/src/meter-overrides.css @@ -0,0 +1,135 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --system-progress-bar-animation-ease-in-out-indeterminate + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --system-progress-bar-animation-duration-indeterminate + ); + --spectrum-progressbar-corner-radius: var( + --system-progress-bar-corner-radius + ); + --spectrum-progressbar-fill-size-indeterminate: var( + --system-progress-bar-fill-size-indeterminate + ); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-line-height-cjk: var( + --system-progress-bar-line-height-cjk + ); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --system-progress-bar-spacing-label-to + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-spacing-top-to-text + ); + --spectrum-progressbar-spacing-label-to-text: var( + --system-progress-bar-spacing-label-to-text + ); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-fill-color-positive: var( + --system-progress-bar-fill-color-positive + ); + --spectrum-progressbar-fill-color-notice: var( + --system-progress-bar-fill-color-notice + ); + --spectrum-progressbar-fill-color-negative: var( + --system-progress-bar-fill-color-negative + ); + --spectrum-progressbar-label-and-value-white: var( + --system-progress-bar-label-and-value-white + ); + --spectrum-progressbar-track-color-white: var( + --system-progress-bar-track-color-white + ); + --spectrum-progressbar-fill-color-white: var( + --system-progress-bar-fill-color-white + ); +} + +:host([size='s']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-s-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-s-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-s-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-s-spacing-top-to-text + ); +} + +:host { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-m-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-m-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-m-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-m-spacing-top-to-text + ); +} + +:host([size='l']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-l-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-l-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-l-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-l-spacing-top-to-text + ); +} + +:host([size='xl']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-xl-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-xl-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-xl-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-xl-spacing-top-to-text + ); +} + +:host { + --spectrum-meter-min-width: var(--system-meter-min-width); + --spectrum-meter-max-width: var(--system-meter-max-width); + --spectrum-meter-inline-size: var(--system-meter-inline-size); + --spectrum-meter-top-to-text: var(--system-meter-top-to-text); +} diff --git a/packages/meter/src/meter.css b/packages/meter/src/meter.css index b6ca5e04e1..506abdaccd 100644 --- a/packages/meter/src/meter.css +++ b/packages/meter/src/meter.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-meter.css'); +@import url('./meter-overrides.css'); .fill { transform-origin: left; diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 303de01918..4ae23853a0 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -11,104 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-progressbar-fill-size-indeterminate: 70%; - --spectrum-progressbar-size-2400: 192px; - --spectrum-progressbar-size-2500: 200px; - --spectrum-progressbar-size-2800: 224px; - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); - --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-medium - ); - --spectrum-progressbar-line-height: var(--spectrum-line-height-100); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --spectrum-spacing-75 - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); - --spectrum-progressbar-text-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); - --spectrum-progressbar-fill-color-positive: var( - --spectrum-positive-visual-color - ); - --spectrum-progressbar-fill-color-notice: var( - --spectrum-notice-visual-color - ); - --spectrum-progressbar-fill-color-negative: var( - --spectrum-negative-visual-color - ); - --spectrum-progressbar-label-and-value-white: var(--spectrum-white); - --spectrum-progressbar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --spectrum-progressbar-fill-color-white: var(--spectrum-white); - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); -} - -:host([size='s']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); -} - -:host { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); -} - -:host([size='l']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); -} - -:host([size='xl']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); -} - :host { --spectrum-progressbar-size-default: var( --mod-meter-inline-size, @@ -125,7 +27,7 @@ governing permissions and limitations under the License. } :host([variant='positive']) .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-positive, @@ -135,7 +37,7 @@ governing permissions and limitations under the License. } :host([variant='notice']) .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-notice, @@ -145,7 +47,7 @@ governing permissions and limitations under the License. } :host([variant='negative']) .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-negative, @@ -388,9 +290,9 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .track { - forced-color-adjust: none; --highcontrast-progressbar-fill-color: ButtonText; --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; border: 1px solid ButtonText; } } diff --git a/packages/modal/package.json b/packages/modal/package.json index c56687af45..cfba1adb03 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -22,6 +22,7 @@ "exports": { ".": "./src/modal-wrapper.css.js", "./package.json": "./package.json", + "./src/modal-overrides.css.js": "./src/modal-overrides.css.js", "./src/modal-wrapper.css.js": "./src/modal-wrapper.css.js", "./src/modal.css.js": "./src/modal.css.js" }, @@ -46,7 +47,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/modal": "^5.1.0" + "@spectrum-css/modal": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css new file mode 100644 index 0000000000..da4e74817b --- /dev/null +++ b/packages/modal/src/modal-overrides.css @@ -0,0 +1,37 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-modal-confirm-exit-animation-delay: var( + --system-modal-confirm-exit-animation-delay + ); + --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); + --spectrum-modal-max-height: var(--system-modal-max-height); + --spectrum-modal-max-width: var(--system-modal-max-width); + --spectrum-modal-background-color: var(--system-modal-background-color); + --spectrum-modal-confirm-border-radius: var( + --system-modal-confirm-border-radius + ); + --spectrum-modal-confirm-exit-animation-duration: var( + --system-modal-confirm-exit-animation-duration + ); + --spectrum-modal-confirm-entry-animation-duration: var( + --system-modal-confirm-entry-animation-duration + ); + --spectrum-modal-confirm-entry-animation-delay: var( + --system-modal-confirm-entry-animation-delay + ); + --spectrum-modal-transition-animation-duration: var( + --system-modal-transition-animation-duration + ); +} diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css index 5b30ad2dde..dbfedad2e2 100644 --- a/packages/modal/src/modal.css +++ b/packages/modal/src/modal.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-modal.css'); +@import url('./modal-overrides.css'); :host { --spectrum-dialog-confirm-exit-animation-duration: var(--swc-test-duration); diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css index b15d1ef178..325ecd48cc 100644 --- a/packages/modal/src/spectrum-modal-wrapper.css +++ b/packages/modal/src/spectrum-modal-wrapper.css @@ -16,7 +16,6 @@ governing permissions and limitations under the License. inline-size: 100vw; block-size: 100vh; block-size: -webkit-fill-available; - block-size: -moz-available; block-size: stretch; visibility: hidden; pointer-events: none; diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index f18c692d1c..fcd925ba52 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -15,6 +15,10 @@ governing permissions and limitations under the License. pointer-events: none; visibility: hidden; opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; transition: transform var( @@ -39,35 +43,13 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; + transition-delay: 0s; transition-delay: var( --mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s) ); } -:host { - --spectrum-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --spectrum-modal-fullscreen-margin: 32px; - --spectrum-modal-max-height: 90vh; - --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-gray-100); - --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --spectrum-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --spectrum-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --spectrum-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - .modal { transform: translateY( var( diff --git a/packages/number-field/package.json b/packages/number-field/package.json index 237fb898b0..4f8698a4d6 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/number-field-overrides.css.js": "./src/number-field-overrides.css.js", "./src/number-field.css.js": "./src/number-field.css.js", "./sp-number-field.js": { "development": "./sp-number-field.dev.js", @@ -68,7 +69,7 @@ }, "devDependencies": { "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "^6.1.0" + "@spectrum-css/stepper": "^7.0.0-s2-foundations.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index c5124adf61..06c35f209a 100644 --- a/packages/number-field/src/NumberField.ts +++ b/packages/number-field/src/NumberField.ts @@ -39,6 +39,7 @@ import { } from '@spectrum-web-components/shared/src/platform.js'; import { TextfieldBase } from '@spectrum-web-components/textfield'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import styles from './number-field.css.js'; export const FRAMES_PER_CHANGE = 5; @@ -104,7 +105,7 @@ const chevronIcon: Record TemplateResult> = { */ export class NumberField extends TextfieldBase { public static override get styles(): CSSResultArray { - return [...super.styles, styles, chevronStyles]; + return [...super.styles, styles, chevronStyles, chevronIconOverrides]; } @query('.buttons') diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css new file mode 100644 index 0000000000..5d97f4f2b7 --- /dev/null +++ b/packages/number-field/src/number-field-overrides.css @@ -0,0 +1,128 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-stepper-border-width: var(--system-stepper-border-width); + --spectrum-stepper-border-color: var(--system-stepper-border-color); + --spectrum-stepper-border-color-hover: var( + --system-stepper-border-color-hover + ); + --spectrum-stepper-border-color-focus: var( + --system-stepper-border-color-focus + ); + --spectrum-stepper-border-color-focus-hover: var( + --system-stepper-border-color-focus-hover + ); + --spectrum-stepper-border-color-keyboard-focus: var( + --system-stepper-border-color-keyboard-focus + ); + --spectrum-stepper-border-radius: var(--system-stepper-border-radius); + --spectrum-stepper-min-width-multiplier: var( + --system-stepper-min-width-multiplier + ); + --spectrum-stepper-animation-duration: var( + --system-stepper-animation-duration + ); + --spectrum-stepper-buttons-border-style: var( + --system-stepper-buttons-border-style + ); + --spectrum-stepper-buttons-border-width: var( + --system-stepper-buttons-border-width + ); + --spectrum-stepper-buttons-border-color: var( + --system-stepper-buttons-border-color + ); + --spectrum-stepper-buttons-background-color: var( + --system-stepper-buttons-background-color + ); + --spectrum-stepper-buttons-border-color-hover: var( + --system-stepper-buttons-border-color-hover + ); + --spectrum-stepper-buttons-border-color-focus: var( + --system-stepper-buttons-border-color-focus + ); + --spectrum-stepper-buttons-border-color-keyboard-focus: var( + --system-stepper-buttons-border-color-keyboard-focus + ); + --spectrum-stepper-button-padding: var(--system-stepper-button-padding); + --spectrum-stepper-button-border-radius-reset: var( + --system-stepper-button-border-radius-reset + ); + --spectrum-stepper-button-border-width: var( + --system-stepper-button-border-width + ); + --spectrum-stepper-button-background-color-focus: var( + --system-stepper-button-background-color-focus + ); + --spectrum-stepper-button-background-color-keyboard-focus: var( + --system-stepper-button-background-color-keyboard-focus + ); + --spectrum-stepper-border-color-invalid: var( + --system-stepper-border-color-invalid + ); + --spectrum-stepper-border-color-hover-invalid: var( + --system-stepper-border-color-hover-invalid + ); + --spectrum-stepper-border-color-focus-invalid: var( + --system-stepper-border-color-focus-invalid + ); + --spectrum-stepper-border-color-focus-hover-invalid: var( + --system-stepper-border-color-focus-hover-invalid + ); + --spectrum-stepper-border-color-keyboard-focus-invalid: var( + --system-stepper-border-color-keyboard-focus-invalid + ); + --spectrum-stepper-focus-indicator-width: var( + --system-stepper-focus-indicator-width + ); + --spectrum-stepper-focus-indicator-gap: var( + --system-stepper-focus-indicator-gap + ); + --spectrum-stepper-focus-indicator-color: var( + --system-stepper-focus-indicator-color + ); + --spectrum-stepper-button-border-color-quiet: var( + --system-stepper-button-border-color-quiet + ); + --spectrum-stepper-button-border-color-disabled: var( + --system-stepper-button-border-color-disabled + ); + --spectrum-stepper-button-border-width-disabled: var( + --system-stepper-button-border-width-disabled + ); + --spectrum-stepper-buttons-background-color-disabled: var( + --system-stepper-buttons-background-color-disabled + ); + --spectrum-stepper-button-width: var(--system-stepper-button-width); + --spectrum-stepper-height: var(--system-stepper-height); +} + +:host([size='s']) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); + --spectrum-stepper-height: var(--system-stepper-size-s-height); +} + +#textfield.spectrum-Stepper--sizeM { + --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); + --spectrum-stepper-height: var(--system-stepper-size-m-height); +} + +:host([size='l']) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); + --spectrum-stepper-height: var(--system-stepper-size-l-height); +} + +:host([size='xl']) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); + --spectrum-stepper-height: var(--system-stepper-size-xl-height); +} diff --git a/packages/number-field/src/number-field.css b/packages/number-field/src/number-field.css index 63313a249f..6287f195f0 100644 --- a/packages/number-field/src/number-field.css +++ b/packages/number-field/src/number-field.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-number-field.css'); +@import url('./number-field-overrides.css'); :host { inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index 9514cc832d..f85c15210c 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -11,20 +11,12 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-stepper-height: var(--spectrum-component-height-100); - --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100); - --spectrum-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --spectrum-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); +#textfield { --spectrum-stepper-width: calc( var(--mod-stepper-height, var(--spectrum-stepper-height)) * var( --mod-stepper-min-width-multiplier, - var(--spectrum-text-field-minimum-width-multiplier) + var(--spectrum-stepper-min-width-multiplier) ) + var( --mod-stepper-button-width, @@ -35,19 +27,6 @@ governing permissions and limitations under the License. var(--spectrum-stepper-border-width) ) * 2 ); - --spectrum-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-stepper-button-offset: calc( - var(--spectrum-stepper-button-width) / 2 - ); - --spectrum-stepper-animation-duration: var( - --spectrum-animation-duration-100 - ); --mod-infield-button-border-color: var( --highcontrast-stepper-border-color, var( @@ -59,123 +38,64 @@ governing permissions and limitations under the License. --mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width) ); + --mod-infield-button-border-radius-reset: var( + --spectrum-stepper-button-border-radius-reset + ); --mod-textfield-border-width: var( --mod-stepper-border-width, var(--spectrum-stepper-border-width) ); -} - -:host([size='s']) #textfield { - --spectrum-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --spectrum-stepper-height: var(--spectrum-component-height-75); -} - -:host([size='l']) #textfield { - --spectrum-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --spectrum-stepper-height: var(--spectrum-component-height-200); -} - -:host([size='xl']) #textfield { - --spectrum-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --spectrum-stepper-height: var(--spectrum-component-height-300); -} - -:host([quiet]) #textfield { - --mod-infield-button-width-stacked: var( - --mod-stepper-button-width-quiet, - var(--spectrum-stepper-button-width) - ); - --mod-textfield-focus-indicator-color: transparent; -} - -:host([disabled]) #textfield { - --mod-infield-button-border-color-quiet-disabled: var( - --spectrum-disabled-border-color - ); -} - -:host([invalid]) #textfield { - --mod-stepper-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-negative-border-color-default) - ); - --mod-stepper-border-color-hover: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-negative-border-color-hover) - ); - --mod-stepper-border-color-focus: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-negative-border-color-focus) - ); - --mod-stepper-border-color-focus-hover: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-negative-border-color-focus-hover) - ); - --mod-stepper-border-color-keyboard-focus: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-negative-border-color-key-focus) - ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-textfield-icon-spacing-inline-start-invalid: 0; -} - -:host([invalid][focused]) #textfield, -:host([invalid]) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) - ); -} - -:host([invalid][keyboard-focused]) #textfield, -:host([invalid]) #textfield:focus-visible { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) - ); -} - -.x { - border-radius: var(--spectrum-stepper-button-border-radius-reset); -} - -#textfield { inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); border-radius: var( --mod-stepper-border-radius, var(--spectrum-stepper-border-radius) ); + border-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); flex-flow: row; display: inline-flex; position: relative; } -#textfield, -#textfield .input { - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); +#textfield:before { + content: ''; } -#textfield .input { - border-inline-end-width: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; +#textfield:after { + content: ''; + inline-size: 100%; + block-size: var( + --mod-stepper-focus-indicator-width, + var(--spectrum-stepper-focus-indicator-width) + ); + position: absolute; + inset-block-end: calc( + ( + var( + --mod-stepper-focus-indicator-gap, + var(--spectrum-stepper-focus-indicator-gap) + ) + + var( + --mod-stepper-focus-indicator-width, + var(--spectrum-stepper-focus-indicator-width) + ) + ) * -1 + ); + inset-inline-start: 0; } :host([focused]) #textfield, #textfield:focus { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) + ); --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-focus, var( @@ -185,15 +105,15 @@ governing permissions and limitations under the License. ); } -:host([focused]) #textfield .input, -#textfield:focus .input { +:host([focused]:not([disabled])) #textfield .input, +:host(:not([disabled])) #textfield:focus .input { outline: none; } -:host([focused]) #textfield .buttons, -:host([focused]) #textfield .input, -#textfield:focus .buttons, -#textfield:focus .input { +:host([focused]:not([disabled])) #textfield .buttons, +:host([focused]:not([disabled])) #textfield .input, +:host(:not([disabled])) #textfield:focus .buttons, +:host(:not([disabled])) #textfield:focus .input { border-color: var( --highcontrast-stepper-border-color-focus, var( @@ -205,6 +125,13 @@ governing permissions and limitations under the License. :host([keyboard-focused]) #textfield, #textfield:focus-visible { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, + var( + --mod-stepper-buttons-border-color-keyboard-focus, + var(--spectrum-stepper-buttons-border-color-keyboard-focus) + ) + ); --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( @@ -212,6 +139,10 @@ governing permissions and limitations under the License. var(--spectrum-stepper-buttons-border-color-keyboard-focus) ) ); +} + +:host([keyboard-focused]:not([disabled])) #textfield, +:host(:not([disabled])) #textfield:focus-visible { outline: var( --mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width) @@ -230,15 +161,15 @@ governing permissions and limitations under the License. ); } -:host([keyboard-focused]) #textfield .input, -#textfield:focus-visible .input { +:host([keyboard-focused]:not([disabled])) #textfield .input, +:host(:not([disabled])) #textfield:focus-visible .input { outline: none; } -:host([keyboard-focused]) #textfield .buttons, -:host([keyboard-focused]) #textfield .input, -#textfield:focus-visible .buttons, -#textfield:focus-visible .input { +:host([keyboard-focused]:not([disabled])) #textfield .buttons, +:host([keyboard-focused]:not([disabled])) #textfield .input, +:host(:not([disabled])) #textfield:focus-visible .buttons, +:host(:not([disabled])) #textfield:focus-visible .input { border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( @@ -248,53 +179,193 @@ governing permissions and limitations under the License. ); } -:host([quiet]) #textfield { +:host([invalid]:not([disabled])) #textfield { + --mod-stepper-border-color: var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ); + --mod-stepper-border-color-hover: var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-stepper-border-color-hover-invalid) + ); + --mod-stepper-border-color-focus: var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ); + --mod-stepper-border-color-focus-hover: var( + --mod-stepper-border-color-focus-hover-invalid, + var(--spectrum-stepper-border-color-focus-hover-invalid) + ); + --mod-stepper-border-color-keyboard-focus: var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ); + --mod-textfield-icon-spacing-inline-start-invalid: 0; +} + +:host([invalid][focused]:not([disabled])) #textfield, +:host([invalid]:not([disabled])) #textfield:focus { --mod-infield-button-border-color: var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ); +} + +:host([invalid][keyboard-focused]:not([disabled])) #textfield, +:host([invalid]:not([disabled])) #textfield:focus-visible { + --mod-infield-button-border-color: var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ); +} + +:host([disabled]) #textfield { + --mod-stepper-border-color: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-hover: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-focus: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-focus-hover: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-keyboard-focus: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-buttons-background-color: var( + --spectrum-stepper-buttons-background-color-disabled + ); + --mod-infield-button-border-width: var( + --spectrum-stepper-button-border-width-disabled + ); + --mod-infield-button-border-color: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-textfield-border-color-disabled: var( + --spectrum-stepper-button-border-color-disabled + ); +} + +#textfield .input { + border-color: var( --highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) ); + border-inline-end-width: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +#textfield.hide-stepper .input { + border-inline-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + border-start-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + border-end-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); +} + +#textfield .buttons { + box-sizing: border-box; + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + inline-size: var( + --mod-stepper-button-width, + var(--spectrum-stepper-button-width) + ); + border-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); + border-style: var( + --mod-stepper-buttons-border-style, + var(--spectrum-stepper-buttons-border-style) + ); + border-width: var( + --highcontrast-stepper-buttons-border-width, + var( + --mod-stepper-buttons-border-width, + var(--spectrum-stepper-buttons-border-width) + ) + ); + background-color: var( + --highcontrast-stepper-buttons-background-color, + var( + --mod-stepper-buttons-background-color, + var(--spectrum-stepper-buttons-background-color) + ) + ); + transition: border-color + var( + --mod-stepper-animation-duration, + var(--spectrum-stepper-animation-duration) + ) + ease-in-out; + border-inline-start-width: 0; + border-start-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + border-end-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + flex-direction: column; + justify-content: center; + display: flex; +} + +:host([quiet]) #textfield { border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; } +:host([quiet]) #textfield .input { + --mod-textfield-focus-indicator-color: transparent; +} + :host([quiet]) #textfield.hide-stepper .input { border-inline-end-width: 0; border-end-end-radius: 0; } -:host([quiet]) #textfield:after { - content: ''; - inline-size: 100%; - block-size: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) +:host([quiet]) #textfield .buttons { + --mod-infield-button-border-color: transparent; + border-width: 0; + border-block-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ) + - var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - ) * -1 + border-block-end-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) ); - inset-inline-start: 0; -} - -:host([quiet]) #textfield .buttons { - border: none; + border-block-end-style: solid; + border-end-end-radius: 0; } :host([quiet]) #textfield .button { - --mod-infield-button-border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) + --mod-infield-button-width-stacked: var( + --mod-stepper-button-width-quiet, + var(--spectrum-stepper-button-width) + ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-quiet, + var(--spectrum-stepper-button-border-color-quiet) ); --mod-infield-button-stacked-bottom-border-block-end-width: var( --mod-stepper-border-width, @@ -322,7 +393,7 @@ governing permissions and limitations under the License. ); } -:host([quiet][keyboard-focused]) #textfield { +:host([quiet][keyboard-focused]:not([disabled])) #textfield { --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-keyboard-focus, var( @@ -333,7 +404,7 @@ governing permissions and limitations under the License. outline: none; } -:host([quiet][keyboard-focused]) #textfield:after { +:host([quiet][keyboard-focused]:not([disabled])) #textfield:after { background-color: var( --highcontrast-stepper-focus-indicator-color, var( @@ -344,22 +415,14 @@ governing permissions and limitations under the License. } @media (hover: hover) { - :host([invalid]:hover) #textfield { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-negative-border-color-hover) - ); - } - - :host([invalid][focused]:hover) #textfield, - :host([invalid]:hover) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) + :host(:hover:not([disabled])) #textfield { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-hover, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) ); - } - - :host(:hover:not([disabled]):not([invalid])) #textfield { --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var( @@ -369,19 +432,15 @@ governing permissions and limitations under the License. ); } - :host(:hover:not([disabled])) #textfield .buttons, - :host(:hover:not([disabled])) #textfield .input { - border-color: var( - --highcontrast-stepper-border-color-hover, + :host([focused]:hover) #textfield, + :host(:hover) #textfield:focus { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus-hover, var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) + --mod-stepper-buttons-border-color-focus-hover, + var(--spectrum-stepper-buttons-border-color-focus-hover) ) ); - } - - :host([focused]:hover) #textfield, - :host(:hover) #textfield:focus { --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-focus-hover, var( @@ -404,7 +463,22 @@ governing permissions and limitations under the License. ); } - :host([quiet]:hover:not([disabled])) #textfield { + :host([invalid]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-stepper-border-color-hover-invalid) + ); + } + + :host([invalid][focused]:not([disabled]):hover) #textfield, + :host([invalid]:not([disabled]):hover) #textfield:focus { + --mod-infield-button-border-color: var( + --mod-stepper-border-color-focus-hover-invalid, + var(--spectrum-stepper-border-color-focus-hover-invalid) + ); + } + + :host([quiet]:not([disabled]):hover) #textfield { --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var( @@ -414,7 +488,7 @@ governing permissions and limitations under the License. ); } - :host([quiet]:hover:not([disabled])) #textfield .buttons { + :host([quiet]:not([disabled]):hover) #textfield .buttons { background-color: initial; } @@ -429,7 +503,7 @@ governing permissions and limitations under the License. ); } - :host([quiet][keyboard-focused]:hover) #textfield { + :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { --mod-infield-button-border-color: var( --highcontrast-stepper-border-color-hover, var( @@ -440,70 +514,6 @@ governing permissions and limitations under the License. } } -#textfield:before { - content: ''; -} - -.buttons { - box-sizing: border-box; - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-style: var( - --mod-stepper-buttons-border-style, - var(--spectrum-stepper-buttons-border-style) - ); - border-width: var( - --highcontrast-stepper-buttons-border-width, - var( - --mod-stepper-buttons-border-width, - var(--spectrum-stepper-buttons-border-width) - ) - ); - background-color: var( - --highcontrast-stepper-buttons-background-color, - var( - --mod-stepper-buttons-background-color, - var(--spectrum-stepper-buttons-background-color) - ) - ); - transition: border-color - var( - --mod-stepper-animation-duration, - var(--spectrum-stepper-animation-duration) - ) - ease-in-out; - border-inline-start-width: 0; - flex-direction: column; - justify-content: center; - display: flex; -} - -.buttons, -#textfield.hide-stepper .input { - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); -} - -#textfield.hide-stepper .input { - border-inline-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); -} - @media (forced-colors: active) { :host { --highcontrast-stepper-border-color: CanvasText; @@ -518,94 +528,21 @@ governing permissions and limitations under the License. --highcontrast-stepper-focus-indicator-color: Highlight; } - :host([disabled]) #textfield { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - } - :host([invalid]) #textfield { --highcontrast-stepper-border-color: Highlight; --highcontrast-stepper-border-color-hover: Highlight; --highcontrast-stepper-border-color-focus: Highlight; --highcontrast-stepper-border-color-focus-hover: Highlight; --highcontrast-stepper-border-color-keyboard-focus: Highlight; + --highcontrast-infield-button-border-color: Highlight; } -} -:host { - --spectrum-stepper-border-width: var( - --system-spectrum-stepper-border-width - ); - --spectrum-stepper-buttons-border-style: var( - --system-spectrum-stepper-buttons-border-style - ); - --spectrum-stepper-buttons-border-width: var( - --system-spectrum-stepper-buttons-border-width - ); - --spectrum-stepper-buttons-border-color: var( - --system-spectrum-stepper-buttons-border-color - ); - --spectrum-stepper-buttons-background-color: var( - --system-spectrum-stepper-buttons-background-color - ); - --spectrum-stepper-buttons-border-color-hover: var( - --system-spectrum-stepper-buttons-border-color-hover - ); - --spectrum-stepper-buttons-border-color-focus: var( - --system-spectrum-stepper-buttons-border-color-focus - ); - --spectrum-stepper-buttons-border-color-keyboard-focus: var( - --system-spectrum-stepper-buttons-border-color-keyboard-focus - ); - --spectrum-stepper-button-border-radius-reset: var( - --system-spectrum-stepper-button-border-radius-reset - ); - --spectrum-stepper-button-border-width: var( - --system-spectrum-stepper-button-border-width - ); - --spectrum-stepper-border-color: var( - --system-spectrum-stepper-border-color - ); - --spectrum-stepper-border-color-hover: var( - --system-spectrum-stepper-border-color-hover - ); - --spectrum-stepper-border-color-focus: var( - --system-spectrum-stepper-border-color-focus - ); - --spectrum-stepper-border-color-focus-hover: var( - --system-spectrum-stepper-border-color-focus-hover - ); - --spectrum-stepper-border-color-keyboard-focus: var( - --system-spectrum-stepper-border-color-keyboard-focus - ); - --spectrum-stepper-border-color-invalid: var( - --system-spectrum-stepper-border-color-invalid - ); - --spectrum-stepper-border-color-focus-invalid: var( - --system-spectrum-stepper-border-color-focus-invalid - ); - --spectrum-stepper-border-color-focus-hover-invalid: var( - --system-spectrum-stepper-border-color-focus-hover-invalid - ); - --spectrum-stepper-border-color-keyboard-focus-invalid: var( - --system-spectrum-stepper-border-color-keyboard-focus-invalid - ); - --spectrum-stepper-button-background-color-focus: var( - --system-spectrum-stepper-button-background-color-focus - ); - --spectrum-stepper-button-background-color-keyboard-focus: var( - --system-spectrum-stepper-button-background-color-keyboard-focus - ); -} - -:host([disabled]) #textfield { - --spectrum-stepper-buttons-background-color: var( - --system-spectrum-stepper-disabled-buttons-background-color - ); - --spectrum-stepper-buttons-border-width: var( - --system-spectrum-stepper-disabled-buttons-border-width - ); + :host([disabled]) #textfield { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-infield-button-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + } } diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 474aa85efc..e64a51eb95 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/picker-button-overrides.css.js": "./src/picker-button-overrides.css.js", "./src/picker-button.css.js": "./src/picker-button.css.js", "./sp-picker-button.js": { "development": "./sp-picker-button.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/pickerbutton": "^5.1.0" + "@spectrum-css/pickerbutton": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts index 9fa2e11305..63976f9e57 100644 --- a/packages/picker-button/src/PickerButton.ts +++ b/packages/picker-button/src/PickerButton.ts @@ -24,6 +24,7 @@ import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe import styles from './picker-button.css.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; const chevronClass = { s: 'spectrum-UIIcon-ChevronDown75', @@ -39,7 +40,7 @@ export class PickerButton extends SizedMixin( ObserveSlotPresence(ButtonBase, '[slot="label"]') ) { public static override get styles(): CSSResultArray { - return [styles, chevronStyles]; + return [styles, chevronStyles, chevronIconOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css new file mode 100644 index 0000000000..5ef0a6e107 --- /dev/null +++ b/packages/picker-button/src/picker-button-overrides.css @@ -0,0 +1,158 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.root { + --spectrum-picker-button-background-color: var( + --system-picker-button-background-color + ); + --spectrum-picker-button-background-color-hover: var( + --system-picker-button-background-color-hover + ); + --spectrum-picker-button-background-color-down: var( + --system-picker-button-background-color-down + ); + --spectrum-picker-button-background-color-key-focus: var( + --system-picker-button-background-color-key-focus + ); + --spectrum-picker-button-border-color: var( + --system-picker-button-border-color + ); + --spectrum-picker-button-border-radius: var( + --system-picker-button-border-radius + ); + --spectrum-picker-button-border-radius-rounded-sided: var( + --system-picker-button-border-radius-rounded-sided + ); + --spectrum-picker-button-border-radius-sided: var( + --system-picker-button-border-radius-sided + ); + --spectrum-picker-button-border-width: var( + --system-picker-button-border-width + ); + --spectrum-picker-button-height: var(--system-picker-button-height); + --spectrum-picker-button-width: var(--system-picker-button-width); + --spectrum-picker-button-gap: var(--system-picker-button-gap); + --spectrum-picker-button-padding: var(--system-picker-button-padding); + --spectrum-picker-button-label-padding: var( + --system-picker-button-label-padding + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-fill-padding + ); + --spectrum-picker-button-border-radius-rounded: var( + --system-picker-button-border-radius-rounded + ); + --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); + --spectrum-picker-button-icon-color-hover: var( + --system-picker-button-icon-color-hover + ); + --spectrum-picker-button-icon-color-down: var( + --system-picker-button-icon-color-down + ); + --spectrum-picker-button-icon-color-key-focus: var( + --system-picker-button-icon-color-key-focus + ); + --spectrum-picker-button-font-color: var(--system-picker-button-font-color); + --spectrum-picker-button-font-color-hover: var( + --system-picker-button-font-color-hover + ); + --spectrum-picker-button-font-color-down: var( + --system-picker-button-font-color-down + ); + --spectrum-picker-button-font-color-key-focus: var( + --system-picker-button-font-color-key-focus + ); + --spectrum-picker-button-font-family: var( + --system-picker-button-font-family + ); + --spectrum-picker-button-font-style: var(--system-picker-button-font-style); + --spectrum-picker-button-font-weight: var( + --system-picker-button-font-weight + ); + --spectrum-picker-button-font-size: var(--system-picker-button-font-size); + --spectrum-picker-button-background-animation-duration: var( + --system-picker-button-background-animation-duration + ); + --spectrum-picker-button-background-color-disabled: var( + --system-picker-button-background-color-disabled + ); + --spectrum-picker-button-background-color-hover-disabled: var( + --system-picker-button-background-color-hover-disabled + ); + --spectrum-picker-button-background-color-down-disabled: var( + --system-picker-button-background-color-down-disabled + ); + --spectrum-picker-button-border-color-disabled: var( + --system-picker-button-border-color-disabled + ); + --spectrum-picker-button-font-color-disabled: var( + --system-picker-button-font-color-disabled + ); + --spectrum-picker-button-font-color-hover-disabled: var( + --system-picker-button-font-color-hover-disabled + ); + --spectrum-picker-button-font-color-down-disabled: var( + --system-picker-button-font-color-down-disabled + ); + --spectrum-picker-button-icon-color-disabled: var( + --system-picker-button-icon-color-disabled + ); + --spectrum-picker-button-icon-color-hover-disabled: var( + --system-picker-button-icon-color-hover-disabled + ); + --spectrum-picker-button-icon-color-down-disabled: var( + --system-picker-button-icon-color-down-disabled + ); +} + +:host([size='s']) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-s-height); + --spectrum-picker-button-width: var(--system-picker-button-size-s-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-s-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-s-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-s-fill-padding + ); +} + +:host([size='l']) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-l-height); + --spectrum-picker-button-width: var(--system-picker-button-size-l-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-l-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-l-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-l-fill-padding + ); +} + +:host([size='xl']) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); + --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-xl-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-xl-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-xl-fill-padding + ); +} diff --git a/packages/picker-button/src/picker-button.css b/packages/picker-button/src/picker-button.css index ad54a192cd..0d1f2257e5 100644 --- a/packages/picker-button/src/picker-button.css +++ b/packages/picker-button/src/picker-button.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-picker-button.css'); +@import url('./picker-button-overrides.css'); :host { display: inline-flex; diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index cf8c18137a..4e5736eb06 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -11,153 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.root { - --spectrum-picker-button-height: var(--spectrum-component-height-100); - --spectrum-picker-button-width: var(--spectrum-component-height-100); - --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); - --spectrum-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --spectrum-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --spectrum-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --spectrum-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-picker-button-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-picker-button-font-style: var(--spectrum-default-font-style); - --spectrum-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --spectrum-picker-button-font-size: var(--spectrum-font-size-100); - --spectrum-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); -} - -:host([disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - --mod-picker-button-font-color: var( - --mod-picker-button-font-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-picker-button-font-color-hover: var( - --mod-picker-button-font-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-picker-button-font-color-down: var( - --mod-picker-button-font-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-picker-button-icon-color: var( - --mod-picker-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-picker-button-icon-color-hover: var( - --mod-picker-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --mod-picker-button-icon-color-down: var( - --mod-picker-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); -} - -:host([quiet]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-quiet, - transparent - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-quiet, - transparent - ); - --mod-picker-button-background-color-key-focus: var( - --mod-picker-button-background-color-key-focus-quiet, - transparent - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet, - transparent - ); -} - -:host([size='s']) .root { - --spectrum-picker-button-height: var(--spectrum-component-height-75); - --spectrum-picker-button-width: var(--spectrum-component-height-75); - --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); - --spectrum-picker-button-font-size: var(--spectrum-font-size-75); - --spectrum-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); -} - -:host([size='l']) .root { - --spectrum-picker-button-height: var(--spectrum-component-height-200); - --spectrum-picker-button-width: var(--spectrum-component-height-200); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); - --spectrum-picker-button-font-size: var(--spectrum-font-size-200); - --spectrum-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); -} - -:host([size='xl']) .root { - --spectrum-picker-button-height: var(--spectrum-component-height-300); - --spectrum-picker-button-width: var(--spectrum-component-height-300); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); - --spectrum-picker-button-font-size: var(--spectrum-font-size-300); - --spectrum-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); -} - .root { background-color: initial; block-size: var( @@ -252,6 +105,81 @@ governing permissions and limitations under the License. ); } +.root.is-disabled, +:host([disabled]) .root { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-disabled, + var(--spectrum-picker-button-background-color-disabled) + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-disabled, + var(--spectrum-picker-button-background-color-hover-disabled) + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-disabled, + var(--spectrum-picker-button-background-color-down-disabled) + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-disabled, + var(--spectrum-picker-button-border-color-disabled) + ); + --mod-picker-button-font-color: var( + --mod-picker-button-font-color-disabled, + var(--spectrum-picker-button-font-color-disabled) + ); + --mod-picker-button-font-color-hover: var( + --mod-picker-button-font-color-hover-disabled, + var(--spectrum-picker-button-font-color-hover-disabled) + ); + --mod-picker-button-font-color-down: var( + --mod-picker-button-font-color-down-disabled, + var(--spectrum-picker-button-font-color-down-disabled) + ); + --mod-picker-button-icon-color: var( + --mod-picker-button-icon-color-disabled, + var(--spectrum-picker-button-icon-color-disabled) + ); + --mod-picker-button-icon-color-hover: var( + --mod-picker-button-icon-color-hover-disabled, + var(--spectrum-picker-button-icon-color-hover-disabled) + ); + --mod-picker-button-icon-color-down: var( + --mod-picker-button-icon-color-down-disabled, + var(--spectrum-picker-button-icon-color-down-disabled) + ); +} + +:host([quiet]) .root { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-quiet, + transparent + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-quiet, + transparent + ); + --mod-picker-button-background-color-key-focus: var( + --mod-picker-button-background-color-key-focus-quiet, + transparent + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet, + transparent + ); +} + +:host([quiet]) .root.is-disabled, +:host([quiet][disabled]) .root { + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); +} + :host([position='right']) .spectrum-PickerButton-fill { border-start-start-radius: var( --mod-picker-button-border-radius-sided, @@ -434,33 +362,3 @@ governing permissions and limitations under the License. .textuiicon .spectrum-PickerButton-fill { inline-size: auto; } - -.root { - --spectrum-picker-button-background-color: var( - --system-spectrum-pickerbutton-spectrum-picker-button-background-color - ); - --spectrum-picker-button-background-color-hover: var( - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover - ); - --spectrum-picker-button-background-color-down: var( - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down - ); - --spectrum-picker-button-background-color-key-focus: var( - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus - ); - --spectrum-picker-button-border-color: var( - --system-spectrum-pickerbutton-spectrum-picker-button-border-color - ); - --spectrum-picker-button-border-radius: var( - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius - ); - --spectrum-picker-button-border-radius-rounded-sided: var( - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided - ); - --spectrum-picker-button-border-radius-sided: var( - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided - ); - --spectrum-picker-button-border-width: var( - --system-spectrum-pickerbutton-spectrum-picker-button-border-width - ); -} diff --git a/packages/picker/package.json b/packages/picker/package.json index 920bbba4b6..9b960bbc2c 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -45,6 +45,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/picker-overrides.css.js": "./src/picker-overrides.css.js", "./src/picker.css.js": "./src/picker.css.js", "./src/strategies.js": { "development": "./src/strategies.dev.js", @@ -97,7 +98,7 @@ "@spectrum-web-components/tray": "^0.47.2" }, "devDependencies": { - "@spectrum-css/picker": "^8.1.0" + "@spectrum-css/picker": "^9.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 6b8e7592f7..7cec1a1842 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -35,6 +35,7 @@ import { import pickerStyles from './picker.css.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import type { Tooltip } from '@spectrum-web-components/tooltip'; @@ -827,7 +828,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) { */ export class Picker extends PickerBase { public static override get styles(): CSSResultArray { - return [pickerStyles, chevronStyles]; + return [pickerStyles, chevronStyles, chevronIconOverrides]; } protected override get containerStyles(): StyleInfo { diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css new file mode 100644 index 0000000000..670397798a --- /dev/null +++ b/packages/picker/src/picker-overrides.css @@ -0,0 +1,285 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-picker-background-color-default: var( + --system-picker-background-color-default + ); + --spectrum-picker-background-color-default-open: var( + --system-picker-background-color-default-open + ); + --spectrum-picker-background-color-active: var( + --system-picker-background-color-active + ); + --spectrum-picker-background-color-hover: var( + --system-picker-background-color-hover + ); + --spectrum-picker-background-color-hover-open: var( + --system-picker-background-color-hover-open + ); + --spectrum-picker-background-color-key-focus: var( + --system-picker-background-color-key-focus + ); + --spectrum-picker-border-color-default: var( + --system-picker-border-color-default + ); + --spectrum-picker-border-color-default-open: var( + --system-picker-border-color-default-open + ); + --spectrum-picker-border-color-hover: var( + --system-picker-border-color-hover + ); + --spectrum-picker-border-color-hover-open: var( + --system-picker-border-color-hover-open + ); + --spectrum-picker-border-color-active: var( + --system-picker-border-color-active + ); + --spectrum-picker-border-color-key-focus: var( + --system-picker-border-color-key-focus + ); + --spectrum-picker-border-width: var(--system-picker-border-width); + --spectrum-picker-font-size: var(--system-picker-font-size); + --spectrum-picker-font-weight: var(--system-picker-font-weight); + --spectrum-picker-placeholder-font-style: var( + --system-picker-placeholder-font-style + ); + --spectrum-picker-line-height: var(--system-picker-line-height); + --spectrum-picker-block-size: var(--system-picker-block-size); + --spectrum-picker-inline-size: var(--system-picker-inline-size); + --spectrum-picker-border-radius: var(--system-picker-border-radius); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-spacing-edge-to-text + ); + --spectrum-picker-spacing-edge-to-text-quiet: var( + --system-picker-spacing-edge-to-text-quiet + ); + --spectrum-picker-spacing-label-to-picker: var( + --system-picker-spacing-label-to + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-spacing-edge-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( + --system-picker-spacing-edge-to-disclosure-icon-quiet + ); + --spectrum-picker-animation-duration: var( + --system-picker-animation-duration + ); + --spectrum-picker-font-color-default: var( + --system-picker-font-color-default + ); + --spectrum-picker-font-color-default-open: var( + --system-picker-font-color-default-open + ); + --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); + --spectrum-picker-font-color-hover-open: var( + --system-picker-font-color-hover-open + ); + --spectrum-picker-font-color-active: var(--system-picker-font-color-active); + --spectrum-picker-font-color-key-focus: var( + --system-picker-font-color-key-focus + ); + --spectrum-picker-icon-color-default: var( + --system-picker-icon-color-default + ); + --spectrum-picker-icon-color-default-open: var( + --system-picker-icon-color-default-open + ); + --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); + --spectrum-picker-icon-color-hover-open: var( + --system-picker-icon-color-hover-open + ); + --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); + --spectrum-picker-icon-color-key-focus: var( + --system-picker-icon-color-key-focus + ); + --spectrum-picker-border-color-error-default: var( + --system-picker-border-color-error-default + ); + --spectrum-picker-border-color-error-default-open: var( + --system-picker-border-color-error-default-open + ); + --spectrum-picker-border-color-error-hover: var( + --system-picker-border-color-error-hover + ); + --spectrum-picker-border-color-error-hover-open: var( + --system-picker-border-color-error-hover-open + ); + --spectrum-picker-border-color-error-active: var( + --system-picker-border-color-error-active + ); + --spectrum-picker-border-color-error-key-focus: var( + --system-picker-border-color-error-key-focus + ); + --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); + --spectrum-picker-background-color-disabled: var( + --system-picker-background-color-disabled + ); + --spectrum-picker-font-color-disabled: var( + --system-picker-font-color-disabled + ); + --spectrum-picker-icon-color-disabled: var( + --system-picker-icon-color-disabled + ); + --spectrum-picker-focus-indicator-gap: var( + --system-picker-focus-indicator-gap + ); + --spectrum-picker-focus-indicator-thickness: var( + --system-picker-focus-indicator-thickness + ); + --spectrum-picker-focus-indicator-color: var( + --system-picker-focus-indicator-color + ); +} + +:host([size='s']) { + --spectrum-picker-font-size: var(--system-picker-size-s-font-size); + --spectrum-picker-block-size: var(--system-picker-size-s-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-s-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-s-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-s-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-s-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-s-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-s-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-s-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-s-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-s-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-s-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-s-spacing-edge-to-disclosure-icon + ); +} + +:host([size='l']) { + --spectrum-picker-font-size: var(--system-picker-size-l-font-size); + --spectrum-picker-block-size: var(--system-picker-size-l-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-l-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-l-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-l-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-l-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-l-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-l-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-l-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-l-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-l-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-l-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-l-spacing-edge-to-disclosure-icon + ); +} + +:host([size='xl']) { + --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); + --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-xl-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-xl-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-xl-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-xl-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-xl-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-xl-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-xl-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-xl-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-xl-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-xl-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-xl-spacing-edge-to-disclosure-icon + ); +} diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css index 189442ed38..707b8606bf 100644 --- a/packages/picker/src/picker.css +++ b/packages/picker/src/picker.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-picker.css'); +@import url('./picker-overrides.css'); :host { display: inline-flex; diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index 8d189f7e94..278f7253f2 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -22,6 +22,8 @@ governing permissions and limitations under the License. var(--spectrum-sans-font-family-stack) ) ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; line-height: var( --mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)) @@ -66,8 +68,6 @@ governing permissions and limitations under the License. ) ) ease-out; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; justify-content: center; align-items: center; margin: 0; @@ -79,8 +79,7 @@ governing permissions and limitations under the License. } #button::-moz-focus-inner { - border: 0; - margin-block: -2px; + border-style: none; padding: 0; } @@ -88,252 +87,6 @@ governing permissions and limitations under the License. outline: none; } -:host { - --spectrum-picker-font-size: var(--spectrum-font-size-100); - --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); - --spectrum-picker-placeholder-font-style: var( - --spectrum-default-font-style - ); - --spectrum-picker-line-height: var(--spectrum-line-height-100); - --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-picker-spacing-label-to-picker: var( - --spectrum-field-label-to-component - ); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --spectrum-picker-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --spectrum-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --spectrum-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --spectrum-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --spectrum-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --spectrum-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --spectrum-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --spectrum-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --spectrum-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --spectrum-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --spectrum-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --spectrum-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); - --spectrum-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-picker-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-picker-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); -} - -:host([size='s']) { - --spectrum-picker-font-size: var(--spectrum-font-size-75); - --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); -} - -:host([size='l']) { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); -} - -:host([size='xl']) { - --spectrum-picker-font-size: var(--spectrum-font-size-300); - --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); -} - @media (forced-colors: active) { :host { --highcontrast-picker-focus-indicator-color: Highlight; @@ -593,7 +346,43 @@ governing permissions and limitations under the License. ); } -:host([invalid]) #button:not(:disabled):not(.is-disabled) { +:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-default-open, + var(--spectrum-picker-font-color-default-open) + ) + ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-default-open, + var(--spectrum-picker-background-color-default-open) + ) + ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-default-open, + var(--spectrum-picker-border-color-default-open) + ) + ); +} + +:host([open]) + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) + .picker { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-default-open, + var(--spectrum-picker-icon-color-default-open) + ) + ); +} + +:host([invalid]) #button:not(:disabled, .is-disabled) { border-color: var( --highcontrast-picker-border-color-default, var( @@ -603,7 +392,7 @@ governing permissions and limitations under the License. ); } -:host([invalid]) #button:not(:disabled):not(.is-disabled) .validation-icon { +:host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon { color: var( --highcontrast-picker-content-color-default, var( @@ -613,7 +402,7 @@ governing permissions and limitations under the License. ); } -:host([invalid]) #button:not(:disabled):not(.is-disabled):active { +:host([invalid]) #button:not(:disabled, .is-disabled):active { border-color: var( --highcontrast-picker-border-color-default, var( @@ -623,7 +412,7 @@ governing permissions and limitations under the License. ); } -:host([invalid][open]) #button:not(:disabled):not(.is-disabled) { +:host([invalid][open]) #button:not(:disabled, .is-disabled) { border-color: var( --highcontrast-picker-border-color-default, var( @@ -633,8 +422,8 @@ governing permissions and limitations under the License. ); } -:host([invalid]) #button.is-keyboardFocused:not(:disabled):not(.is-disabled), -:host([invalid]) #button:not(:disabled):not(.is-disabled):focus-visible { +:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled), +:host([invalid]) #button:not(:disabled, .is-disabled):focus-visible { border-color: var( --highcontrast-picker-border-color-default, var( @@ -665,52 +454,6 @@ governing permissions and limitations under the License. ); } -:host([disabled]) #button, -#button:disabled { - cursor: default; - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-disabled, - var(--spectrum-picker-background-color-disabled) - ) - ); - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); -} - -:host([disabled]) #button .icon, -:host([disabled]) #button .picker, -:host([disabled]) #button .validation-icon, -#button:disabled .icon, -#button:disabled .picker, -#button:disabled .validation-icon { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-icon-color-disabled, - var(--spectrum-picker-icon-color-disabled) - ) - ); -} - -:host([disabled]) #button .label.placeholder, -#button:disabled .label.placeholder { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); -} - .icon { flex-shrink: 0; margin-inline-end: var( @@ -719,40 +462,6 @@ governing permissions and limitations under the License. ); } -:host([open]:not([quiet])) #button { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default-open, - var(--spectrum-picker-font-color-default-open) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-default-open, - var(--spectrum-picker-background-color-default-open) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-default-open, - var(--spectrum-picker-border-color-default-open) - ) - ); -} - -:host([open]:not([quiet])) #button .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-default-open, - var(--spectrum-picker-icon-color-default-open) - ) - ); -} - .label { white-space: nowrap; font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); @@ -767,11 +476,11 @@ governing permissions and limitations under the License. text-overflow: ellipsis; text-align: start; flex: auto; - margin-block-start: var( + padding-block-start: var( --mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text) ); - margin-block-end: calc( + padding-block-end: calc( var( --mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text) @@ -908,6 +617,7 @@ governing permissions and limitations under the License. var(--spectrum-picker-font-color-default) ) ); + background-color: initial; background-color: var(--highcontrast-picker-background-color, transparent); border: none; border-radius: 0; @@ -971,27 +681,8 @@ governing permissions and limitations under the License. ); } - :host([invalid]) #button:not(:disabled):not(.is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover, - var(--spectrum-picker-border-color-error-hover) - ) - ); - } - - :host([invalid][open]) #button:not(:disabled):not(.is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover-open, - var(--spectrum-picker-border-color-error-hover-open) - ) - ); - } - - :host([open]:not([quiet])) #button:hover { + :host([open]) + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover { color: var( --highcontrast-picker-content-color-default, var( @@ -1015,7 +706,9 @@ governing permissions and limitations under the License. ); } - :host([open]:not([quiet])) #button:hover .picker { + :host([open]) + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover + .picker { color: var( --highcontrast-picker-content-color-default, var( @@ -1025,6 +718,26 @@ governing permissions and limitations under the License. ); } + :host([invalid]) #button:not(:disabled, .is-disabled):hover { + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-error-hover, + var(--spectrum-picker-border-color-error-hover) + ) + ); + } + + :host([invalid][open]) #button:not(:disabled, .is-disabled):hover { + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-error-hover-open, + var(--spectrum-picker-border-color-error-hover-open) + ) + ); + } + .label.placeholder:hover { color: var( --highcontrast-picker-content-color-default, @@ -1036,6 +749,7 @@ governing permissions and limitations under the License. } :host([quiet]) #button:hover { + background-color: initial; background-color: var( --highcontrast-picker-background-color, transparent @@ -1045,6 +759,7 @@ governing permissions and limitations under the License. :host([quiet]) #button.is-keyboardFocused, :host([quiet]) #button:focus-visible { + background-color: initial; background-color: var(--highcontrast-picker-background-color, transparent); } @@ -1080,10 +795,11 @@ governing permissions and limitations under the License. border-radius: 0; } -:host([quiet][disabled]) #button, :host([quiet][open]) #button, -:host([quiet]) #button:active, -:host([quiet]) #button:disabled { +:host([quiet][disabled]) #button#button, +:host([quiet]) #button#button:disabled, +:host([quiet]) #button:active { + background-color: initial; background-color: var(--highcontrast-picker-background-color, transparent); } @@ -1092,42 +808,49 @@ governing permissions and limitations under the License. display: inline-flex; } -:host { - --spectrum-picker-background-color-default: var( - --system-spectrum-picker-background-color-default - ); - --spectrum-picker-background-color-default-open: var( - --system-spectrum-picker-background-color-default-open - ); - --spectrum-picker-background-color-active: var( - --system-spectrum-picker-background-color-active - ); - --spectrum-picker-background-color-hover: var( - --system-spectrum-picker-background-color-hover - ); - --spectrum-picker-background-color-hover-open: var( - --system-spectrum-picker-background-color-hover-open - ); - --spectrum-picker-background-color-key-focus: var( - --system-spectrum-picker-background-color-key-focus - ); - --spectrum-picker-border-color-default: var( - --system-spectrum-picker-border-color-default - ); - --spectrum-picker-border-color-default-open: var( - --system-spectrum-picker-border-color-default-open - ); - --spectrum-picker-border-color-hover: var( - --system-spectrum-picker-border-color-hover +:host([disabled]) #button, +#button:disabled { + cursor: default; + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-disabled, + var(--spectrum-picker-background-color-disabled) + ) ); - --spectrum-picker-border-color-hover-open: var( - --system-spectrum-picker-border-color-hover-open + border-color: #0000; + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-font-color-disabled, + var(--spectrum-picker-font-color-disabled) + ) ); - --spectrum-picker-border-color-active: var( - --system-spectrum-picker-border-color-active +} + +:host([disabled]) #button .icon, +:host([disabled]) #button .picker, +:host([disabled]) #button .validation-icon, +#button:disabled .icon, +#button:disabled .picker, +#button:disabled .validation-icon { + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-icon-color-disabled, + var(--spectrum-picker-icon-color-disabled) + ) ); - --spectrum-picker-border-color-key-focus: var( - --system-spectrum-picker-border-color-key-focus +} + +:host([disabled]) #button .label.placeholder, +#button:disabled .label.placeholder { + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-font-color-disabled, + var(--spectrum-picker-font-color-disabled) + ) ); - --spectrum-picker-border-width: var(--system-spectrum-picker-border-width); } diff --git a/packages/popover/package.json b/packages/popover/package.json index 3a1aa0acda..afbd069c62 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/popover-overrides.css.js": "./src/popover-overrides.css.js", "./src/popover.css.js": "./src/popover.css.js", "./sp-popover.js": { "development": "./sp-popover.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/overlay": "^0.47.2" }, "devDependencies": { - "@spectrum-css/popover": "^7.1.0" + "@spectrum-css/popover": "^8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css new file mode 100644 index 0000000000..f6f23988a8 --- /dev/null +++ b/packages/popover/src/popover-overrides.css @@ -0,0 +1,39 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-popover-border-width: var(--system-popover-border-width); + --spectrum-popover-animation-distance: var( + --system-popover-animation-distance + ); + --spectrum-popover-background-color: var(--system-popover-background-color); + --spectrum-popover-border-color: var(--system-popover-border-color); + --spectrum-popover-content-area-spacing-vertical: var( + --system-popover-content-area-spacing-vertical + ); + --spectrum-popover-shadow-horizontal: var( + --system-popover-shadow-horizontal + ); + --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); + --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); + --spectrum-popover-shadow-color: var(--system-popover-shadow-color); + --spectrum-popover-corner-radius: var(--system-popover-corner-radius); + --spectrum-popover-pointer-width: var(--system-popover-pointer-width); + --spectrum-popover-pointer-height: var(--system-popover-pointer-height); + --spectrum-popover-pointer-edge-offset: var( + --system-popover-pointer-edge-offset + ); + --spectrum-popover-pointer-edge-spacing: var( + --system-popover-pointer-edge-spacing + ); +} diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css index e654f17895..37e97f89df 100644 --- a/packages/popover/src/popover.css +++ b/packages/popover/src/popover.css @@ -9,7 +9,9 @@ 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 url('./spectrum-popover.css'); +@import url('./popover-overrides.css'); :host { min-width: min-content; diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index af9e6346d2..4ebdf34af8 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -15,6 +15,10 @@ governing permissions and limitations under the License. pointer-events: none; visibility: hidden; opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; transition: transform var( @@ -39,44 +43,13 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; + transition-delay: 0s; transition-delay: var( --mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s) ); } -:host { - --flow-direction: 1; - --spectrum-popover-animation-distance: var(--spectrum-spacing-100); - --spectrum-popover-background-color: var( - --spectrum-background-layer-2-color - ); - --spectrum-popover-border-color: var(--spectrum-gray-400); - --spectrum-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); - --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); - --spectrum-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --spectrum-popover-pointer-edge-spacing: calc( - var(--spectrum-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); -} - -:host:dir(rtl), -:host([dir='rtl']) { - --flow-direction: -1; -} - @media (forced-colors: active) { :host { --highcontrast-popover-border-color: CanvasText; @@ -218,7 +191,7 @@ governing permissions and limitations under the License. :host([tip]) .spectrum-Popover--right-bottom, :host([tip]) .spectrum-Popover--right-top, :host([placement*='right'][tip]) { - margin-inline-start: calc( + margin-left: calc( var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var( --mod-popover-border-width, @@ -241,7 +214,7 @@ governing permissions and limitations under the License. :host([tip]) .spectrum-Popover--left-bottom, :host([tip]) .spectrum-Popover--left-top, :host([placement*='left'][tip]) { - margin-inline-end: calc( + margin-right: calc( var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var( --mod-popover-border-width, @@ -459,137 +432,25 @@ governing permissions and limitations under the License. inset-block: 0; } -:host([tip][placement*='left']) .spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--end #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip, -:host([tip][placement*='left'][placement*='left']) #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip, -:host([tip][placement*='right'][placement*='left']) #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--start #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip { - inset-inline: 100% auto; -} - -:host([tip][placement*='right']) .spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--end #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip, -:host([tip][placement*='left'][placement*='right']) #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-bottom #tip, -:host([tip]) - .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom - #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip, -:host([tip][placement*='right'][placement*='right']) #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--start-bottom #tip, -:host([tip]) - .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom - #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--start #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip { - inset-inline: auto 100%; +:host([tip][placement*='left']) #tip, +:host([tip]) .spectrum-Popover--left-bottom #tip, +:host([tip]) .spectrum-Popover--left-top #tip { + left: 100%; + right: auto; +} + +:host([tip][placement*='right']) #tip, +:host([tip]) .spectrum-Popover--right-bottom #tip, +:host([tip]) .spectrum-Popover--right-top #tip { + left: auto; + right: 100%; transform: scaleX(-1); } -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--end-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-top #tip, -:host([tip][placement*='left']) .spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--end-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-top #tip, -:host([tip][placement*='right']) .spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-top #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-top #tip { +:host([tip]) .spectrum-Popover--end-top #tip, +:host([tip]) .spectrum-Popover--left-top #tip, +:host([tip]) .spectrum-Popover--right-top #tip, +:host([tip]) .spectrum-Popover--start-top #tip { inset-block: var( --mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing) @@ -597,62 +458,10 @@ governing permissions and limitations under the License. auto; } -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--end-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--left-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip, -:host([tip][placement*='left']) .spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) - .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom - #tip, -:host([tip]) - .spectrum-Popover--right-bottom.spectrum-Popover--start-bottom - #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--end-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--right-bottom #tip, -:host([tip][placement*='right']) .spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip, -:host([tip]) - .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom - #tip, -:host([tip]) - .spectrum-Popover--start-bottom.spectrum-Popover--start-bottom - #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-bottom #tip { +:host([tip]) .spectrum-Popover--end-bottom #tip, +:host([tip]) .spectrum-Popover--left-bottom #tip, +:host([tip]) .spectrum-Popover--right-bottom #tip, +:host([tip]) .spectrum-Popover--start-bottom #tip { inset-block: auto var( --mod-popover-pointer-edge-spacing, @@ -690,9 +499,3 @@ governing permissions and limitations under the License. :host([dir='rtl'][tip]) .spectrum-Popover--end-top #tip { transform: scaleX(1); } - -:host { - --spectrum-popover-border-width: var( - --system-spectrum-popover-border-width - ); -} diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index 667fbf7c76..4b60c780c6 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/progress-bar-overrides.css.js": "./src/progress-bar-overrides.css.js", "./src/progress-bar.css.js": "./src/progress-bar.css.js", "./sp-progress-bar.js": { "development": "./sp-progress-bar.dev.js", @@ -63,7 +64,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/progressbar": "^4.1.5" + "@spectrum-css/progressbar": "^5.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css new file mode 100644 index 0000000000..3000e08692 --- /dev/null +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -0,0 +1,135 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --system-progress-bar-animation-ease-in-out-indeterminate + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --system-progress-bar-animation-duration-indeterminate + ); + --spectrum-progressbar-corner-radius: var( + --system-progress-bar-corner-radius + ); + --spectrum-progressbar-fill-size-indeterminate: var( + --system-progress-bar-fill-size-indeterminate + ); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-line-height-cjk: var( + --system-progress-bar-line-height-cjk + ); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --system-progress-bar-spacing-label-to + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-spacing-top-to-text + ); + --spectrum-progressbar-spacing-label-to-text: var( + --system-progress-bar-spacing-label-to-text + ); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-fill-color-positive: var( + --system-progress-bar-fill-color-positive + ); + --spectrum-progressbar-fill-color-notice: var( + --system-progress-bar-fill-color-notice + ); + --spectrum-progressbar-fill-color-negative: var( + --system-progress-bar-fill-color-negative + ); + --spectrum-progressbar-label-and-value-white: var( + --system-progress-bar-label-and-value-white + ); + --spectrum-progressbar-track-color-white: var( + --system-progress-bar-track-color-white + ); + --spectrum-progressbar-fill-color-white: var( + --system-progress-bar-fill-color-white + ); +} + +:host([size='s']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-s-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-s-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-s-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-s-spacing-top-to-text + ); +} + +:host { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-m-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-m-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-m-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-m-spacing-top-to-text + ); +} + +:host([size='l']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-l-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-l-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-l-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-l-spacing-top-to-text + ); +} + +:host([size='xl']) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-xl-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-xl-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-xl-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-xl-spacing-top-to-text + ); +} + +.spectrum-Meter { + --spectrum-meter-min-width: var(--system-meter-min-width); + --spectrum-meter-max-width: var(--system-meter-max-width); + --spectrum-meter-inline-size: var(--system-meter-inline-size); + --spectrum-meter-top-to-text: var(--system-meter-top-to-text); +} diff --git a/packages/progress-bar/src/progress-bar.css b/packages/progress-bar/src/progress-bar.css index 7bff6440c0..223ff458b4 100644 --- a/packages/progress-bar/src/progress-bar.css +++ b/packages/progress-bar/src/progress-bar.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-progress-bar.css'); +@import url('./progress-bar-overrides.css'); .fill { width: 100%; diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css index 393f44b6f1..fe12a467be 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -11,104 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-progressbar-fill-size-indeterminate: 70%; - --spectrum-progressbar-size-2400: 192px; - --spectrum-progressbar-size-2500: 200px; - --spectrum-progressbar-size-2800: 224px; - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); - --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-medium - ); - --spectrum-progressbar-line-height: var(--spectrum-line-height-100); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --spectrum-spacing-75 - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); - --spectrum-progressbar-text-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); - --spectrum-progressbar-fill-color-positive: var( - --spectrum-positive-visual-color - ); - --spectrum-progressbar-fill-color-notice: var( - --spectrum-notice-visual-color - ); - --spectrum-progressbar-fill-color-negative: var( - --spectrum-negative-visual-color - ); - --spectrum-progressbar-label-and-value-white: var(--spectrum-white); - --spectrum-progressbar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --spectrum-progressbar-fill-color-white: var(--spectrum-white); - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); -} - -:host([size='s']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); -} - -:host { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); -} - -:host([size='l']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); -} - -:host([size='xl']) { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --spectrum-progressbar-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); -} - .spectrum-Meter { --spectrum-progressbar-size-default: var( --mod-meter-inline-size, @@ -125,7 +27,7 @@ governing permissions and limitations under the License. } :host([positive]) .spectrum-Meter .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-positive, @@ -135,7 +37,7 @@ governing permissions and limitations under the License. } :host([notice]) .spectrum-Meter .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-notice, @@ -145,7 +47,7 @@ governing permissions and limitations under the License. } :host([negative]) .spectrum-Meter .fill { - background: var( + background-color: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color-negative, @@ -388,9 +290,9 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .track { - forced-color-adjust: none; --highcontrast-progressbar-fill-color: ButtonText; --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; border: 1px solid ButtonText; } } diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json index 21d4222a17..b299f9f103 100644 --- a/packages/progress-circle/package.json +++ b/packages/progress-circle/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/progress-circle-overrides.css.js": "./src/progress-circle-overrides.css.js", "./src/progress-circle.css.js": "./src/progress-circle.css.js", "./sp-progress-circle.js": { "development": "./sp-progress-circle.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/progresscircle": "^3.1.0" + "@spectrum-css/progresscircle": "^4.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css new file mode 100644 index 0000000000..3bc4f00712 --- /dev/null +++ b/packages/progress-circle/src/progress-circle-overrides.css @@ -0,0 +1,48 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-progress-circle-track-border-color: var( + --system-progress-circle-track-border-color + ); + --spectrum-progress-circle-fill-border-color: var( + --system-progress-circle-fill-border-color + ); + --spectrum-progress-circle-track-border-color-over-background: var( + --system-progress-circle-track-border-color-over-background + ); + --spectrum-progress-circle-fill-border-color-over-background: var( + --system-progress-circle-fill-border-color-over-background + ); + --spectrum-progress-circle-size: var(--system-progress-circle-size); + --spectrum-progress-circle-thickness: var( + --system-progress-circle-thickness + ); + --spectrum-progress-circle-track-border-style: var( + --system-progress-circle-track-border-style + ); +} + +:host([size='s']) { + --spectrum-progress-circle-size: var(--system-progress-circle-small-size); + --spectrum-progress-circle-thickness: var( + --system-progress-circle-small-thickness + ); +} + +:host([size='l']) { + --spectrum-progress-circle-size: var(--system-progress-circle-large-size); + --spectrum-progress-circle-thickness: var( + --system-progress-circle-large-thickness + ); +} diff --git a/packages/progress-circle/src/progress-circle.css b/packages/progress-circle/src/progress-circle.css index 3320308f6e..64f82cecf4 100644 --- a/packages/progress-circle/src/progress-circle.css +++ b/packages/progress-circle/src/progress-circle.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-progress-circle.css'); +@import url('./progress-circle-overrides.css'); :host { block-size: var( diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css index 239a0d10cd..679509d9e6 100644 --- a/packages/progress-circle/src/spectrum-progress-circle.css +++ b/packages/progress-circle/src/spectrum-progress-circle.css @@ -11,11 +11,161 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@media (forced-colors: active) { + :host { + --highcontrast-progress-circle-fill-border-color: Highlight; + --highcontrast-progress-circle-fill-border-color-over-background: Highlight; + } + + .track { + --spectrum-progress-circle-track-border-style: double; + } +} + +:host { + position: var(--mod-progress-circle-position, relative); + direction: ltr; + display: inline-block; + position: relative; + transform: translateZ(0); +} + +:host, +.track { + inline-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + block-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); +} + +.track { + box-sizing: border-box; + border-style: var( + --highcontrast-progress-circle-track-border-style, + var( + --mod-progress-circle-track-border-style, + var(--spectrum-progress-circle-track-border-style) + ) + ); + border-width: var( + --mod-progress-circle-thickness, + var(--spectrum-progress-circle-thickness) + ); + border-radius: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-color: var( + --mod-progress-circle-track-border-color, + var(--spectrum-progress-circle-track-border-color) + ); +} + +.fills { + inline-size: 100%; + block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; +} + +.fill { + box-sizing: border-box; + inline-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + block-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-style: solid; + border-width: var( + --mod-progress-circle-thickness, + var(--spectrum-progress-circle-thickness) + ); + border-radius: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-color: var( + --highcontrast-progress-circle-fill-border-color, + var( + --mod-progress-circle-fill-border-color, + var(--spectrum-progress-circle-fill-border-color) + ) + ); +} + +:host([static='white']) .track { + border-color: var( + --mod-progress-circle-track-border-color-over-background, + var(--spectrum-progress-circle-track-border-color-over-background) + ); +} + +:host([static='white']) .fill { + border-color: var( + --highcontrast-progress-circle-fill-border-color-over-background, + var( + --mod-progress-circle-fill-border-color-over-background, + var(--spectrum-progress-circle-fill-border-color-over-background) + ) + ); +} + +.fillMask1, +.fillMask2 { + inline-size: 50%; + block-size: 100%; + transform-origin: 100%; + position: absolute; + overflow: hidden; + transform: rotate(180deg); +} + +.fillSubMask1, +.fillSubMask2 { + inline-size: 100%; + block-size: 100%; + transform-origin: 100%; + overflow: hidden; + transform: rotate(-180deg); +} + +.fillMask2 { + transform: rotate(0); +} + +:host([indeterminate]) .fills { + will-change: transform; + transform-origin: center; + animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite + spectrum-fills-rotate; + transform: translateZ(0); +} + +:host([indeterminate]) .fillSubMask1 { + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-1; + transform: translateZ(0); +} + +:host([indeterminate]) .fillSubMask2 { + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-2; + transform: translateZ(0); +} + .fill-submask-2 { - animation: 1s linear infinite b; + animation: 1s linear infinite spectrum-fill-mask-2; } -@keyframes a { +@keyframes spectrum-fill-mask-1 { 0% { transform: rotate(90deg); } @@ -257,7 +407,7 @@ governing permissions and limitations under the License. } } -@keyframes b { +@keyframes spectrum-fill-mask-2 { 0% { transform: rotate(180deg); } @@ -499,7 +649,7 @@ governing permissions and limitations under the License. } } -@keyframes c { +@keyframes spectrum-fills-rotate { 0% { transform: rotate(-90deg); } @@ -508,185 +658,3 @@ governing permissions and limitations under the License. transform: rotate(270deg); } } - -:host { - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); - --spectrum-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --spectrum-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --spectrum-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --spectrum-progress-circle-size: var( - --spectrum-progress-circle-size-medium - ); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --spectrum-progress-circle-track-border-style: solid; -} - -:host([size='s']) { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-small - ); -} - -:host([size='l']) { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); - --spectrum-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-large - ); -} - -@media (forced-colors: active) { - :host { - --highcontrast-progress-circle-fill-border-color: Highlight; - --highcontrast-progress-circle-fill-border-color-over-background: Highlight; - } - - .track { - --spectrum-progress-circle-track-border-style: double; - } -} - -:host { - position: var(--mod-progress-circle-position, relative); - direction: ltr; - display: inline-block; - transform: translateZ(0); -} - -:host, -.track { - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); -} - -.track { - box-sizing: border-box; - border-style: var( - --highcontrast-progress-circle-track-border-style, - var( - --mod-progress-circle-track-border-style, - var(--spectrum-progress-circle-track-border-style) - ) - ); - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --mod-progress-circle-track-border-color, - var(--spectrum-progress-circle-track-border-color) - ); -} - -.fills { - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; -} - -.fill { - box-sizing: border-box; - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-style: solid; - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --highcontrast-progress-circle-fill-border-color, - var( - --mod-progress-circle-fill-border-color, - var(--spectrum-progress-circle-fill-border-color) - ) - ); -} - -:host([static='white']) .track { - border-color: var( - --mod-progress-circle-track-border-color-over-background, - var(--spectrum-progress-circle-track-border-color-over-background) - ); -} - -:host([static='white']) .fill { - border-color: var( - --highcontrast-progress-circle-fill-border-color-over-background, - var( - --mod-progress-circle-fill-border-color-over-background, - var(--spectrum-progress-circle-fill-border-color-over-background) - ) - ); -} - -.fillMask1, -.fillMask2 { - inline-size: 50%; - block-size: 100%; - transform-origin: 100%; - position: absolute; - overflow: hidden; - transform: rotate(180deg); -} - -.fillSubMask1, -.fillSubMask2 { - inline-size: 100%; - block-size: 100%; - transform-origin: 100%; - overflow: hidden; - transform: rotate(-180deg); -} - -.fillMask2 { - transform: rotate(0); -} - -:host([indeterminate]) .fills { - will-change: transform; - transform-origin: center; - animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite c; - transform: translateZ(0); -} - -:host([indeterminate]) .fillSubMask1 { - will-change: transform; - animation: 1s linear infinite a; - transform: translateZ(0); -} - -:host([indeterminate]) .fillSubMask2 { - will-change: transform; - animation: 1s linear infinite b; - transform: translateZ(0); -} diff --git a/packages/quick-actions/package.json b/packages/quick-actions/package.json index 8c010ddb8f..ceae916380 100644 --- a/packages/quick-actions/package.json +++ b/packages/quick-actions/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/quick-actions-overrides.css.js": "./src/quick-actions-overrides.css.js", "./src/quick-actions.css.js": "./src/quick-actions.css.js", "./sp-quick-actions.js": { "development": "./sp-quick-actions.dev.js", diff --git a/packages/quick-actions/src/quick-actions-overrides.css b/packages/quick-actions/src/quick-actions-overrides.css new file mode 100644 index 0000000000..0d2efbedd6 --- /dev/null +++ b/packages/quick-actions/src/quick-actions-overrides.css @@ -0,0 +1,114 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); +} + +:host([opened]) { + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0, 0s) + ); +} + +:host([enter-from='left'][opened]) { + transform: translateX( + var( + --mod-overlay-animation-distance, + var(--spectrum-overlay-animation-distance, 6px) + ) + ); +} + +:host([enter-from='right'][opened]) { + transform: translateX( + calc( + var( + --mod-overlay-animation-distance, + var(--spectrum-overlay-animation-distance, 6px) + ) * -1 + ) + ); +} + +:host { + box-sizing: border-box; + padding-block: var( + --spectrum-quickactions-padding-y, + var(--spectrum-global-dimension-size-50) + ); + padding-inline: var( + --spectrum-quickactions-padding-x, + var(--spectrum-global-dimension-size-50) + ); + block-size: var( + --spectrum-quickactions-height, + var(--spectrum-global-dimension-size-500) + ); + border-radius: var( + --spectrum-quickactions-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + background-color: var( + --spectrum-quickactions-background-color, + var(--spectrum-alias-background-color-quickactions) + ); + justify-content: center; + align-items: center; + display: inline-flex; +} + +[name='action'] + ::slotted([slot='action']) { + margin-inline-start: var( + --spectrum-quickactions-button-gap-x, + var(--spectrum-global-dimension-size-100) + ); +} + +#overlay { + background-color: var( + --spectrum-quickactions-overlay-color, + var(--spectrum-alias-background-color-quickactions-overlay) + ); +} + +:host([text-only]) [name='action'] + ::slotted([slot='action']) { + margin-inline-start: var( + --spectrum-quickactions-text-button-gap-x, + var(--spectrum-global-dimension-size-50) + ); +} diff --git a/packages/quick-actions/src/quick-actions.css b/packages/quick-actions/src/quick-actions.css index 3ead8c20c7..e6b0e68198 100644 --- a/packages/quick-actions/src/quick-actions.css +++ b/packages/quick-actions/src/quick-actions.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-quick-actions.css'); +@import url('./quick-actions-overrides.css'); diff --git a/packages/radio/package.json b/packages/radio/package.json index 5c2a01842f..0fc3b6041c 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -37,6 +37,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/radio-overrides.css.js": "./src/radio-overrides.css.js", "./src/radio.css.js": "./src/radio.css.js", "./sp-radio.js": { "development": "./sp-radio.dev.js", @@ -72,7 +73,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/radio": "^9.2.3" + "@spectrum-css/radio": "^10.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css new file mode 100644 index 0000000000..cc72c56602 --- /dev/null +++ b/packages/radio/src/radio-overrides.css @@ -0,0 +1,210 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-radio-button-border-color-default: var( + --system-radio-button-border-color-default + ); + --spectrum-radio-button-border-color-hover: var( + --system-radio-button-border-color-hover + ); + --spectrum-radio-button-border-color-down: var( + --system-radio-button-border-color-down + ); + --spectrum-radio-button-border-color-focus: var( + --system-radio-button-border-color-focus + ); + --spectrum-radio-neutral-content-color: var( + --system-radio-neutral-content-color + ); + --spectrum-radio-neutral-content-color-hover: var( + --system-radio-neutral-content-color-hover + ); + --spectrum-radio-neutral-content-color-down: var( + --system-radio-neutral-content-color-down + ); + --spectrum-radio-neutral-content-color-focus: var( + --system-radio-neutral-content-color-focus + ); + --spectrum-radio-focus-indicator-thickness: var( + --system-radio-focus-indicator-thickness + ); + --spectrum-radio-focus-indicator-gap: var( + --system-radio-focus-indicator-gap + ); + --spectrum-radio-focus-indicator-color: var( + --system-radio-focus-indicator-color + ); + --spectrum-radio-disabled-content-color: var( + --system-radio-disabled-content-color + ); + --spectrum-radio-disabled-border-color: var( + --system-radio-disabled-border-color + ); + --spectrum-radio-emphasized-accent-color: var( + --system-radio-emphasized-accent-color + ); + --spectrum-radio-emphasized-accent-color-hover: var( + --system-radio-emphasized-accent-color-hover + ); + --spectrum-radio-emphasized-accent-color-down: var( + --system-radio-emphasized-accent-color-down + ); + --spectrum-radio-emphasized-accent-color-focus: var( + --system-radio-emphasized-accent-color-focus + ); + --spectrum-radio-border-width: var(--system-radio-border-width); + --spectrum-radio-button-background-color: var( + --system-radio-button-background-color + ); + --spectrum-radio-button-checked-border-color-default: var( + --system-radio-button-checked-border-color-default + ); + --spectrum-radio-button-checked-border-color-hover: var( + --system-radio-button-checked-border-color-hover + ); + --spectrum-radio-button-checked-border-color-down: var( + --system-radio-button-checked-border-color-down + ); + --spectrum-radio-button-checked-border-color-focus: var( + --system-radio-button-checked-border-color-focus + ); + --spectrum-radio-text-to-control: var(--system-radio-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-label-bottom-to-text + ); + --spectrum-radio-font-size: var(--system-radio-font-size); + --spectrum-radio-line-height: var(--system-radio-line-height); + --spectrum-radio-animation-duration: var(--system-radio-animation-duration); + --spectrum-radio-height: var(--system-radio-height); + --spectrum-radio-button-control-size: var( + --system-radio-button-control-size + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-button-top-to-control + ); +} + +:host(:lang(ja)) { + --spectrum-radio-line-height-cjk: var( + --system-radio-lang-ja-line-height-cjk + ); +} + +:host(:lang(zh)) { + --spectrum-radio-line-height-cjk: var( + --system-radio-lang-zh-line-height-cjk + ); +} + +:host(:lang(ko)) { + --spectrum-radio-line-height-cjk: var( + --system-radio-lang-ko-line-height-cjk + ); +} + +:host([size='s']) { + --spectrum-radio-height: var(--system-radio-size-s-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-s-button-control-size + ); + --spectrum-radio-text-to-control: var( + --system-radio-size-s-text-to-control + ); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-s-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-s-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-s-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-s-font-size); +} + +:host { + --spectrum-radio-height: var(--system-radio-size-m-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-m-button-control-size + ); + --spectrum-radio-text-to-control: var( + --system-radio-size-m-text-to-control + ); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-m-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-m-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-m-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-m-font-size); +} + +:host([size='l']) { + --spectrum-radio-height: var(--system-radio-size-l-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-l-button-control-size + ); + --spectrum-radio-text-to-control: var( + --system-radio-size-l-text-to-control + ); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-l-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-l-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-l-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-l-font-size); +} + +:host([size='xl']) { + --spectrum-radio-height: var(--system-radio-size-xl-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-xl-button-control-size + ); + --spectrum-radio-text-to-control: var( + --system-radio-size-xl-text-to-control + ); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-xl-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-xl-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-xl-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); +} + +:host([emphasized]) { + --spectrum-radio-button-checked-border-color-default: var( + --system-radio-emphasized-button-checked-border-color-default + ); + --spectrum-radio-button-checked-border-color-hover: var( + --system-radio-emphasized-button-checked-border-color-hover + ); + --spectrum-radio-button-checked-border-color-down: var( + --system-radio-emphasized-button-checked-border-color-down + ); + --spectrum-radio-button-checked-border-color-focus: var( + --system-radio-emphasized-button-checked-border-color-focus + ); +} diff --git a/packages/radio/src/radio.css b/packages/radio/src/radio.css index a17425aa91..64792ea177 100644 --- a/packages/radio/src/radio.css +++ b/packages/radio/src/radio.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-radio.css'); +@import url('./radio-overrides.css'); :host(:focus) { outline: none; diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 80985754a8..455d90ccda 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -11,153 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --spectrum-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --spectrum-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --spectrum-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --spectrum-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-75); - --spectrum-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-radio-font-size: var(--spectrum-font-size-100); - --spectrum-radio-line-height: var(--spectrum-line-height-100); - --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --spectrum-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); -} - -:host(:lang(ja)), -:host(:lang(ko)), -:host(:lang(zh)) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); -} - -:host([size='s']) { - --spectrum-radio-height: var(--spectrum-component-height-75); - --spectrum-radio-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-radio-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --spectrum-radio-font-size: var(--spectrum-font-size-75); -} - -:host { - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --spectrum-radio-font-size: var(--spectrum-font-size-100); -} - -:host([size='l']) { - --spectrum-radio-height: var(--spectrum-component-height-200); - --spectrum-radio-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-radio-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --spectrum-radio-font-size: var(--spectrum-font-size-200); -} - -:host([size='xl']) { - --spectrum-radio-height: var(--spectrum-component-height-300); - --spectrum-radio-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-radio-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --spectrum-radio-font-size: var(--spectrum-font-size-300); -} - @media (forced-colors: active) { :host { --highcontrast-radio-neutral-content-color: CanvasText; @@ -589,33 +442,3 @@ governing permissions and limitations under the License. :host([dir='rtl']) #button:after { transform: translateX(50%) translateY(-50%); } - -:host { - --spectrum-radio-button-border-color-default: var( - --system-spectrum-radio-button-border-color-default - ); - --spectrum-radio-button-border-color-hover: var( - --system-spectrum-radio-button-border-color-hover - ); - --spectrum-radio-button-border-color-down: var( - --system-spectrum-radio-button-border-color-down - ); - --spectrum-radio-button-border-color-focus: var( - --system-spectrum-radio-button-border-color-focus - ); -} - -:host([emphasized]) { - --spectrum-radio-button-checked-border-color-default: var( - --system-spectrum-radio-emphasized-button-checked-border-color-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --system-spectrum-radio-emphasized-button-checked-border-color-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --system-spectrum-radio-emphasized-button-checked-border-color-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --system-spectrum-radio-emphasized-button-checked-border-color-focus - ); -} diff --git a/packages/search/package.json b/packages/search/package.json index 47d33612c2..62f33200b7 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/search-overrides.css.js": "./src/search-overrides.css.js", "./src/search.css.js": "./src/search.css.js", "./sp-search.js": { "development": "./sp-search.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/textfield": "^0.47.2" }, "devDependencies": { - "@spectrum-css/search": "^7.1.0" + "@spectrum-css/search": "^8.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css new file mode 100644 index 0000000000..33399358db --- /dev/null +++ b/packages/search/src/search-overrides.css @@ -0,0 +1,123 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-search-border-color-default: var( + --system-search-border-color-default + ); + --spectrum-search-border-color-hover: var( + --system-search-border-color-hover + ); + --spectrum-search-border-color-focus: var( + --system-search-border-color-focus + ); + --spectrum-search-border-color-focus-hover: var( + --system-search-border-color-focus-hover + ); + --spectrum-search-border-color-key-focus: var( + --system-search-border-color-key-focus + ); + --spectrum-search-inline-size: var(--system-search-inline-size); + --spectrum-search-min-inline-multiplier: var( + --system-search-min-inline-multiplier + ); + --spectrum-search-to-help-text: var(--system-search-to-help-text); + --spectrum-search-top-to-text: var(--system-search-top-to-text); + --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); + --spectrum-search-focus-indicator-thickness: var( + --system-search-focus-indicator-thickness + ); + --spectrum-search-focus-indicator-gap: var( + --system-search-focus-indicator-gap + ); + --spectrum-search-focus-indicator-color: var( + --system-search-focus-indicator-color + ); + --spectrum-search-font-family: var(--system-search-font-family); + --spectrum-search-font-weight: var(--system-search-font-weight); + --spectrum-search-font-style: var(--system-search-font-style); + --spectrum-search-line-height: var(--system-search-line-height); + --spectrum-search-color-default: var(--system-search-color-default); + --spectrum-search-color-hover: var(--system-search-color-hover); + --spectrum-search-color-focus: var(--system-search-color-focus); + --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); + --spectrum-search-color-key-focus: var(--system-search-color-key-focus); + --spectrum-search-border-width: var(--system-search-border-width); + --spectrum-search-background-color: var(--system-search-background-color); + --spectrum-search-color-disabled: var(--system-search-color-disabled); + --spectrum-search-background-color-disabled: var( + --system-search-background-color-disabled + ); + --spectrum-search-border-color-disabled: var( + --system-search-border-color-disabled + ); + --spectrum-search-border-radius: var(--system-search-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); + --spectrum-search-block-size: var(--system-search-block-size); + --spectrum-search-icon-size: var(--system-search-icon-size); + --spectrum-search-text-to-icon: var(--system-search-text-to-icon); +} + +:host([size='s']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-s-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-s-edge-to-visual + ); + --spectrum-search-block-size: var(--system-search-size-s-block-size); + --spectrum-search-icon-size: var(--system-search-size-s-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); +} + +:host([size='m']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-m-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-m-edge-to-visual + ); + --spectrum-search-block-size: var(--system-search-size-m-block-size); + --spectrum-search-icon-size: var(--system-search-size-m-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); +} + +:host([size='l']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-l-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-l-edge-to-visual + ); + --spectrum-search-block-size: var(--system-search-size-l-block-size); + --spectrum-search-icon-size: var(--system-search-size-l-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); +} + +:host([size='xl']) #textfield { + --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); + --spectrum-search-edge-to-visual: var( + --system-search-size-xl-edge-to-visual + ); + --spectrum-search-block-size: var(--system-search-size-xl-block-size); + --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); +} + +:host([quiet]) { + --spectrum-search-background-color: var( + --system-search-quiet-background-color + ); + --spectrum-search-background-color-disabled: var( + --system-search-quiet-background-color-disabled + ); + --spectrum-search-border-color-disabled: var( + --system-search-quiet-border-color-disabled + ); + --spectrum-search-border-radius: var(--system-search-quiet-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); +} diff --git a/packages/search/src/search.css b/packages/search/src/search.css index 24b1351706..32d343a594 100644 --- a/packages/search/src/search.css +++ b/packages/search/src/search.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-search.css'); +@import url('./search-overrides.css'); :host { --mod-textfield-spacing-inline: var( diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js index ae61a5f7e5..1fd00aeea3 100644 --- a/packages/search/src/spectrum-config.js +++ b/packages/search/src/spectrum-config.js @@ -37,10 +37,11 @@ const config = { converter.classToId('spectrum-Search-clearButton', 'button'), converter.classToId('spectrum-Search-textfield', 'textfield'), // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Search--sizeM'), + // converter.classToHost('spectrum-Search--sizeM'), ...converter.enumerateAttributes( [ ['spectrum-Search--sizeS', 's'], + ['spectrum-Search--sizeM', 'm'], ['spectrum-Search--sizeL', 'l'], ['spectrum-Search--sizeXL', 'xl'], ], diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 8b6303b0f4..1f4b8fb36b 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -11,52 +11,27 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-search-inline-size: var(--spectrum-field-width); - --spectrum-search-block-size: var(--spectrum-component-height-100); +@media (forced-colors: active) { + #textfield #textfield, + #textfield #textfield .input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; + } + + #textfield #button .spectrum-ClearButton-fill { + forced-color-adjust: none; + background-color: initial; + } +} + +#textfield { --spectrum-search-button-inline-size: var(--spectrum-search-block-size); --spectrum-search-min-inline-size: calc( - var(--spectrum-search-field-minimum-width-multiplier) * + var(--spectrum-search-min-inline-multiplier) * var(--spectrum-search-block-size) ); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); - --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-search-font-weight: var(--spectrum-regular-font-weight); - --spectrum-search-font-style: var(--spectrum-default-font-style); - --spectrum-search-line-height: var(--spectrum-line-height-100); - --spectrum-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --spectrum-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-search-border-width: var(--spectrum-border-width-100); - --spectrum-search-background-color: var(--spectrum-gray-50); - --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); --mod-textfield-font-family: var( --mod-search-font-family, var(--spectrum-search-font-family) @@ -141,64 +116,6 @@ governing permissions and limitations under the License. --mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled) ); -} - -:host([size='s']) { - --spectrum-search-block-size: var(--spectrum-component-height-75); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); -} - -:host([size='l']) { - --spectrum-search-block-size: var(--spectrum-component-height-200); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); -} - -:host([size='xl']) { - --spectrum-search-block-size: var(--spectrum-component-height-300); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); -} - -:host([quiet]) { - --spectrum-search-quiet-button-offset: calc( - var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - - var( - --mod-workflow-icon-size-100, - var(--spectrum-workflow-icon-size-100) - ) / 2 - ); - --spectrum-search-background-color: transparent; - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var( - --spectrum-disabled-border-color - ); -} - -:host([quiet]) #textfield { - --spectrum-search-border-radius: 0; - --spectrum-search-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); -} - -@media (forced-colors: active) { - #textfield #textfield, - #textfield #textfield .input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } - - #textfield #button .spectrum-ClearButton-fill { - forced-color-adjust: none; - background-color: initial; - } -} - -#textfield { inline-size: var( --mod-search-inline-size, var(--spectrum-search-inline-size) @@ -219,15 +136,12 @@ governing permissions and limitations under the License. } #button { - border-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); position: absolute; inset-block-start: 0; inset-inline-end: 0; } +#button, #button .spectrum-ClearButton-fill { border-radius: var( --mod-search-border-radius, @@ -354,6 +268,13 @@ governing permissions and limitations under the License. ); } +:host([quiet]) { + --spectrum-search-quiet-button-offset: calc( + var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2 + ); +} + :host([quiet]) #button { transform: translateX( var( @@ -388,63 +309,3 @@ governing permissions and limitations under the License. ) ); } - -:host { - --spectrum-search-border-radius: var( - --system-spectrum-search-border-radius - ); - --spectrum-search-edge-to-visual: var( - --system-spectrum-search-edge-to-visual - ); - --spectrum-search-border-color-default: var( - --system-spectrum-search-border-color-default - ); - --spectrum-search-border-color-hover: var( - --system-spectrum-search-border-color-hover - ); - --spectrum-search-border-color-focus: var( - --system-spectrum-search-border-color-focus - ); - --spectrum-search-border-color-focus-hover: var( - --system-spectrum-search-border-color-focus-hover - ); - --spectrum-search-border-color-key-focus: var( - --system-spectrum-search-border-color-key-focus - ); -} - -:host([size='s']) { - --spectrum-search-border-radius: var( - --system-spectrum-search-sizes-border-radius - ); - --spectrum-search-edge-to-visual: var( - --system-spectrum-search-sizes-edge-to-visual - ); -} - -:host { - --spectrum-search-border-radius: var( - --system-spectrum-search-sizem-border-radius - ); - --spectrum-search-edge-to-visual: var( - --system-spectrum-search-sizem-edge-to-visual - ); -} - -:host([size='l']) { - --spectrum-search-border-radius: var( - --system-spectrum-search-sizel-border-radius - ); - --spectrum-search-edge-to-visual: var( - --system-spectrum-search-sizel-edge-to-visual - ); -} - -:host([size='xl']) { - --spectrum-search-border-radius: var( - --system-spectrum-search-sizexl-border-radius - ); - --spectrum-search-edge-to-visual: var( - --system-spectrum-search-sizexl-edge-to-visual - ); -} diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 7bc23bdad5..26de702b1f 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -41,8 +41,11 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/sidenav-heading-overrides.css.js": "./src/sidenav-heading-overrides.css.js", "./src/sidenav-heading.css.js": "./src/sidenav-heading.css.js", + "./src/sidenav-item-overrides.css.js": "./src/sidenav-item-overrides.css.js", "./src/sidenav-item.css.js": "./src/sidenav-item.css.js", + "./src/sidenav-overrides.css.js": "./src/sidenav-overrides.css.js", "./src/sidenav.css.js": "./src/sidenav.css.js", "./sp-sidenav.js": { "development": "./sp-sidenav.dev.js", @@ -80,7 +83,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/sidenav": "^5.1.0" + "@spectrum-css/sidenav": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css new file mode 100644 index 0000000000..67fdc46170 --- /dev/null +++ b/packages/sidenav/src/sidenav-heading-overrides.css @@ -0,0 +1,182 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +#list { + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var( + --system-side-nav-focus-ring-color + ); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var( + --system-side-nav-background-hover + ); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var( + --system-side-nav-text-font-family + ); + --spectrum-sidenav-text-font-weight: var( + --system-side-nav-text-font-weight + ); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-text-line-height + ); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var( + --system-side-nav-header-font-size + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); +} + +#list:lang(ja) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); +} + +#list:lang(zh) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); +} + +#list:lang(ko) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); +} diff --git a/packages/sidenav/src/sidenav-heading.css b/packages/sidenav/src/sidenav-heading.css index df9dce070a..fa6537deca 100644 --- a/packages/sidenav/src/sidenav-heading.css +++ b/packages/sidenav/src/sidenav-heading.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-sidenav-heading.css'); +@import url('./sidenav-heading-overrides.css'); :host { display: block; diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css new file mode 100644 index 0000000000..67fdc46170 --- /dev/null +++ b/packages/sidenav/src/sidenav-item-overrides.css @@ -0,0 +1,182 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +#list { + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var( + --system-side-nav-focus-ring-color + ); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var( + --system-side-nav-background-hover + ); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var( + --system-side-nav-text-font-family + ); + --spectrum-sidenav-text-font-weight: var( + --system-side-nav-text-font-weight + ); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-text-line-height + ); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var( + --system-side-nav-header-font-size + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); +} + +#list:lang(ja) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); +} + +#list:lang(zh) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); +} + +#list:lang(ko) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); +} diff --git a/packages/sidenav/src/sidenav-item.css b/packages/sidenav/src/sidenav-item.css index 3691a8e203..17420f7508 100644 --- a/packages/sidenav/src/sidenav-item.css +++ b/packages/sidenav/src/sidenav-item.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-sidenav-item.css'); +@import url('./sidenav-item-overrides.css'); :host { display: block; diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css new file mode 100644 index 0000000000..1486c7807e --- /dev/null +++ b/packages/sidenav/src/sidenav-overrides.css @@ -0,0 +1,182 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var( + --system-side-nav-focus-ring-color + ); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var( + --system-side-nav-background-hover + ); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var( + --system-side-nav-text-font-family + ); + --spectrum-sidenav-text-font-weight: var( + --system-side-nav-text-font-weight + ); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-text-line-height + ); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var( + --system-side-nav-header-font-size + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); +} + +:host:lang(ja) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); +} + +:host:lang(zh) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); +} + +:host:lang(ko) { + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); +} diff --git a/packages/sidenav/src/sidenav.css b/packages/sidenav/src/sidenav.css index 4048597856..1024206171 100644 --- a/packages/sidenav/src/sidenav.css +++ b/packages/sidenav/src/sidenav.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-sidenav.css'); +@import url('./sidenav-overrides.css'); :host { display: block; diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index edae739b46..cf11a8385a 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -11,116 +11,10 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#list { - --spectrum-sidenav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --spectrum-sidenav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --spectrum-sidenav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --spectrum-sidenav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - --spectrum-sidenav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --spectrum-sidenav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); -} - -#list:lang(ja), -#list:lang(ko), -#list:lang(zh) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-sidenav-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); +@media (forced-colors: active) { + #list .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } #list { @@ -167,9 +61,3 @@ governing permissions and limitations under the License. var(--spectrum-sidenav-heading-bottom-margin) ); } - -@media (forced-colors: active) { - #list .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } -} diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index ca54798d26..cf619e7cd1 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -11,116 +11,28 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#list { - --spectrum-sidenav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --spectrum-sidenav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --spectrum-sidenav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --spectrum-sidenav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - --spectrum-sidenav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --spectrum-sidenav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); -} +@media (forced-colors: active) { + #list ::slotted([slot='icon']) { + forced-color-adjust: preserve-parent-color; + } -#list:lang(ja), -#list:lang(ko), -#list:lang(zh) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-sidenav-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); + :host { + --highcontrast-sidenav-content-disabled-color: GrayText; + --highcontrast-sidenav-focus-ring-color: Highlight; + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + forced-color-adjust: none; + } } #list { @@ -438,27 +350,3 @@ governing permissions and limitations under the License. var(--spectrum-sidenav-start-to-content-with-icon-third-level) ); } - -@media (forced-colors: active) { - #list ::slotted([slot='icon']) { - forced-color-adjust: preserve-parent-color; - } - - :host { - forced-color-adjust: none; - --highcontrast-sidenav-content-disabled-color: GrayText; - --highcontrast-sidenav-focus-ring-color: Highlight; - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - } -} diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css index 1306d25e1d..77cb05b687 100644 --- a/packages/sidenav/src/spectrum-sidenav.css +++ b/packages/sidenav/src/spectrum-sidenav.css @@ -11,116 +11,10 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-sidenav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --spectrum-sidenav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --spectrum-sidenav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --spectrum-sidenav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - --spectrum-sidenav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --spectrum-sidenav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --spectrum-sidenav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-sidenav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - --spectrum-sidenav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); -} - -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-sidenav-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); +@media (forced-colors: active) { + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } :host { @@ -130,9 +24,3 @@ governing permissions and limitations under the License. list-style-type: none; display: flex; } - -@media (forced-colors: active) { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } -} diff --git a/packages/slider/package.json b/packages/slider/package.json index a2499bf731..88aeaa8c82 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -41,6 +41,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/slider-overrides.css.js": "./src/slider-overrides.css.js", "./src/slider.css.js": "./src/slider.css.js", "./sp-slider.js": { "development": "./sp-slider.dev.js", @@ -83,7 +84,7 @@ "@spectrum-web-components/theme": "^0.47.2" }, "devDependencies": { - "@spectrum-css/slider": "^5.2.4" + "@spectrum-css/slider": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css new file mode 100644 index 0000000000..eba7eb761e --- /dev/null +++ b/packages/slider/src/slider-overrides.css @@ -0,0 +1,227 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-slider-track-color: var(--system-slider-track-color); + --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); + --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); + --spectrum-slider-ramp-track-color-disabled: var( + --system-slider-ramp-track-color-disabled + ); + --spectrum-slider-handle-background-color: var( + --system-slider-handle-background-color + ); + --spectrum-slider-handle-background-color-disabled: var( + --system-slider-handle-background-color-disabled + ); + --spectrum-slider-ramp-handle-background-color: var( + --system-slider-ramp-handle-background-color + ); + --spectrum-slider-ticks-handle-background-color: var( + --system-slider-ticks-handle-background-color + ); + --spectrum-slider-handle-border-color: var( + --system-slider-handle-border-color + ); + --spectrum-slider-handle-disabled-background-color: var( + --system-slider-handle-disabled-background-color + ); + --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); + --spectrum-slider-handle-border-color-hover: var( + --system-slider-handle-border-color-hover + ); + --spectrum-slider-handle-border-color-down: var( + --system-slider-handle-border-color-down + ); + --spectrum-slider-handle-border-color-key-focus: var( + --system-slider-handle-border-color-key-focus + ); + --spectrum-slider-handle-focus-ring-color-key-focus: var( + --system-slider-handle-focus-ring-color-key-focus + ); + --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); + --spectrum-slider-ramp-track-block-size: var( + --system-slider-ramp-track-block-size + ); + --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); + --spectrum-slider-min-size: var(--system-slider-min-size); + --spectrum-slider-track-corner-radius: var( + --system-slider-track-corner-radius + ); + --spectrum-slider-label-margin-start: var( + --system-slider-label-margin-start + ); + --spectrum-slider-handle-border-width: var( + --system-slider-handle-border-width + ); + --spectrum-slider-handle-margin-left: var( + --system-slider-handle-margin-left + ); + --spectrum-slider-controls-margin: var(--system-slider-controls-margin); + --spectrum-slider-track-margin-offset: var( + --system-slider-track-margin-offset + ); + --spectrum-slider-track-middle-handleoffset: var( + --system-slider-track-middle-handleoffset + ); + --spectrum-slider-input-top-size: var(--system-slider-input-top-size); + --spectrum-slider-track-fill-thickness: var( + --system-slider-track-fill-thickness + ); + --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); + --spectrum-slider-tick-mark-border-radius: var( + --system-slider-tick-mark-border-radius + ); + --spectrum-slider-tick-handle-background-color: var( + --system-slider-tick-handle-background-color + ); + --spectrum-slider-track-color-disabled: var( + --system-slider-track-color-disabled + ); + --spectrum-slider-track-fill-color-disabled: var( + --system-slider-track-fill-color-disabled + ); + --spectrum-slider-handle-border-color-disabled: var( + --system-slider-handle-border-color-disabled + ); + --spectrum-slider-label-text-color: var(--system-slider-label-text-color); + --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); + --spectrum-slider-label-text-color-disabled: var( + --system-slider-label-text-color-disabled + ); + --spectrum-slider-tick-mark-color-disabled: var( + --system-slider-tick-mark-color-disabled + ); + --spectrum-slider-ramp-handle-border-color-active: var( + --system-slider-ramp-handle-border-color-active + ); + --spectrum-slider-input-left: var(--system-slider-input-left); + --spectrum-slider-track-handleoffset: var( + --system-slider-track-handleoffset + ); + --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); + --spectrum-slider-font-size: var(--system-slider-font-size); + --spectrum-slider-handle-size: var(--system-slider-handle-size); + --spectrum-slider-control-height: var(--system-slider-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); + --spectrum-slider-control-to-field-label: var( + --system-slider-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-value-side-padding-inline + ); +} + +:host([size='s']) { + --spectrum-slider-font-size: var(--system-slider-size-s-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); + --spectrum-slider-control-height: var( + --system-slider-size-s-control-height + ); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-s-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-s-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-s-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-s-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-s-value-side-padding-inline + ); +} + +:host { + --spectrum-slider-font-size: var(--system-slider-size-m-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-m-handle-size); + --spectrum-slider-control-height: var( + --system-slider-size-m-control-height + ); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-m-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-m-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-m-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-m-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-m-value-side-padding-inline + ); +} + +:host([size='l']) { + --spectrum-slider-font-size: var(--system-slider-size-l-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); + --spectrum-slider-control-height: var( + --system-slider-size-l-control-height + ); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-l-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-l-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-l-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-l-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-l-value-side-padding-inline + ); + --spectrum-slider-value-inline-size: var( + --system-slider-size-l-value-inline-size + ); +} + +:host([size='xl']) { + --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); + --spectrum-slider-control-height: var( + --system-slider-size-xl-control-height + ); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-xl-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-xl-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-xl-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-xl-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-xl-value-side-padding-inline + ); + --spectrum-slider-value-inline-size: var( + --system-slider-size-xl-value-inline-size + ); +} diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css index 4df860297c..c70cae4299 100644 --- a/packages/slider/src/slider.css +++ b/packages/slider/src/slider.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-slider.css'); +@import url('./slider-overrides.css'); /* * Removes blue outline from :host when it is being focused. diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 78bb016eb1..e2c377627a 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -12,21 +12,15 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --spectrum-slider-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium + z-index: 0; + min-inline-size: var( + --mod-slider-min-size, + var(--spectrum-slider-min-size) ); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --spectrum-slider-value-inline-size: 18px; + -webkit-user-select: none; + user-select: none; + display: block; + position: relative; } :host:dir(rtl), @@ -34,137 +28,33 @@ governing permissions and limitations under the License. --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } -:host([size='s']) { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); - --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --spectrum-slider-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small +:host:not(.spectrum-Slider--sideLabel) + #label-container + + #track:has(.spectrum-Slider-ramp) { + margin-block-start: calc( + var( + --mod-slider-ramp-track-height, + var(--spectrum-slider-ramp-track-block-size) + ) / 2 ); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); } -:host([size='l']) { - --spectrum-slider-font-size: var(--spectrum-font-size-100); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); - --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --spectrum-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --spectrum-slider-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --spectrum-slider-value-inline-size: 18px; +.spectrum-Slider--sideLabel { + align-items: center; + display: flex; } -:host([size='xl']) { - --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --spectrum-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --spectrum-slider-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --spectrum-slider-value-inline-size: 22px; +.spectrum-Slider--sideLabel #label-container { + margin-block-start: 0; } -:host { - --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-slider-min-size: var(--spectrum-spacing-900); - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); - --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); - --spectrum-slider-handle-margin-left: calc( - var(--spectrum-slider-handle-size) / -2 - ); - --spectrum-slider-controls-margin: calc( - var(--spectrum-slider-handle-size) / 2 - ); - --spectrum-slider-track-margin-offset: calc( - var(--spectrum-slider-controls-margin) * -1 - ); - --spectrum-slider-track-middle-handleoffset: calc( - var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) / - 2 - ); - --spectrum-slider-input-top-size: calc( - var(--spectrum-slider-handle-size) / -2 / 4 - ); - --spectrum-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); - --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --spectrum-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); - --spectrum-slider-input-left: calc( - var(--spectrum-slider-handle-margin-left) / 4 - ); - --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --spectrum-slider-range-track-reset: 0; - z-index: 0; - min-inline-size: var( - --mod-slider-min-size, - var(--spectrum-slider-min-size) +.spectrum-Slider--sideLabel #label-container #label { + margin-inline-end: var( + --mod-slider-value-side-padding-inline, + var(--spectrum-slider-value-side-padding-inline) ); - -webkit-user-select: none; - user-select: none; - display: block; - position: relative; -} - -.spectrum-Slider--sideLabel { - align-items: center; - display: flex; } -.spectrum-Slider--sideLabel #label-container, .spectrum-Slider--sideLabel #label-container + #track { margin-block-start: 0; } @@ -212,6 +102,11 @@ governing permissions and limitations under the License. position: relative; } +#controls:not(:has(.spectrum-Slider-ticks)) { + align-items: center; + display: flex; +} + #label-container + #track { margin-block-start: calc( var(--spectrum-slider-control-to-field-label) * -1 @@ -413,13 +308,7 @@ governing permissions and limitations under the License. #ramp { block-size: var( --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-height) - ); - margin-block-start: calc( - var( - --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-height) - ) / 2 + var(--spectrum-slider-ramp-track-block-size) ); position: absolute; inset-inline-start: var( @@ -435,7 +324,7 @@ governing permissions and limitations under the License. #ramp svg { inline-size: 100%; block-size: 100%; - transform: var(--spectrum-logical-rotation); + transform: var(--spectrum-logical-rotation,); } .handle { @@ -499,6 +388,14 @@ governing permissions and limitations under the License. .handle:before { content: ''; + inline-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); + block-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); transition: box-shadow var( @@ -518,14 +415,6 @@ governing permissions and limitations under the License. var(--spectrum-animation-duration-100) ) ease-out; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); border-radius: 100%; display: block; position: absolute; @@ -553,6 +442,8 @@ governing permissions and limitations under the License. } .input { + pointer-events: none; + cursor: default; inline-size: var( --mod-slider-handle-size, var(--spectrum-slider-handle-size) @@ -561,10 +452,8 @@ governing permissions and limitations under the License. --mod-slider-handle-size, var(--spectrum-slider-handle-size) ); - opacity: 0.000001; - cursor: default; appearance: none; - pointer-events: none; + opacity: 0.000001; border: 0; margin: 0; padding: 0; @@ -826,13 +715,6 @@ governing permissions and limitations under the License. } .handle { - border-color: var( - --highcontrast-slider-handle-border-color, - var( - --mod-slider-handle-border-color, - var(--spectrum-slider-handle-border-color) - ) - ); background: var( --highcontrast-slider-handle-background-color, var( @@ -840,6 +722,13 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-background-color) ) ); + border-color: var( + --highcontrast-slider-handle-border-color, + var( + --mod-slider-handle-border-color, + var(--spectrum-slider-handle-border-color) + ) + ); } .handle.handle-highlight { @@ -875,6 +764,13 @@ governing permissions and limitations under the License. } :host([variant='ramp']) .handle { + background: var( + --mod-slider-ramp-handle-background-color, + var( + --highcontrast-slider-ramp-handle-background-color, + var(--spectrum-slider-ramp-handle-background-color) + ) + ); box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var( --highcontrast-slider-ramp-handle-border-color-active, @@ -883,13 +779,6 @@ governing permissions and limitations under the License. var(--spectrum-slider-ramp-handle-border-color-active) ) ); - background: var( - --mod-slider-ramp-handle-background-color, - var( - --highcontrast-slider-ramp-handle-background-color, - var(--spectrum-slider-ramp-handle-background-color) - ) - ); } .input { @@ -907,13 +796,6 @@ governing permissions and limitations under the License. } .handle.dragging { - border-color: var( - --highcontrast-slider-handle-border-color-down, - var( - --mod-slider-handle-border-color-down, - var(--spectrum-slider-handle-border-color-down) - ) - ); background: var( --highcontrast-slider-handle-background-color, var( @@ -921,6 +803,13 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-background-color) ) ); + border-color: var( + --highcontrast-slider-handle-border-color-down, + var( + --mod-slider-handle-border-color-down, + var(--spectrum-slider-handle-border-color-down) + ) + ); } :host([variant='range']) .track:not(:first-of-type, :last-of-type):before { @@ -950,13 +839,8 @@ governing permissions and limitations under the License. } :host([disabled]) .handle { - border-color: var( - --highcontrast-slider-handle-border-color-disabled, - var( - --mod-slider-handle-border-color-disabled, - var(--spectrum-slider-handle-border-color-disabled) - ) - ); + pointer-events: none; + cursor: default; background: var( --highcontrast-slider-handle-disabled-background-color, var( @@ -964,15 +848,16 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-disabled-background-color) ) ); - cursor: default; - pointer-events: none; + border-color: var( + --highcontrast-slider-handle-border-color-disabled, + var( + --mod-slider-handle-border-color-disabled, + var(--spectrum-slider-handle-border-color-disabled) + ) + ); } :host([disabled]) .handle:active { - border-color: var( - --highcontrast-disabled-border-color, - var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) - ); background: var( --highcontrast-slider-handle-background-color-disabled, var( @@ -980,6 +865,10 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-background-color-disabled) ) ); + border-color: var( + --highcontrast-disabled-border-color, + var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) + ); } @media (hover: hover) { @@ -994,13 +883,6 @@ governing permissions and limitations under the License. } :host([disabled]) .handle:hover { - border-color: var( - --highcontrast-disabled-border-color, - var( - --mod-disabled-border-color, - var(--spectrum-disabled-border-color) - ) - ); background: var( --highcontrast-slider-handle-background-color-disabled, var( @@ -1008,6 +890,13 @@ governing permissions and limitations under the License. var(--spectrum-slider-handle-background-color-disabled) ) ); + border-color: var( + --highcontrast-disabled-border-color, + var( + --mod-disabled-border-color, + var(--spectrum-disabled-border-color) + ) + ); } } @@ -1137,53 +1026,7 @@ governing permissions and limitations under the License. } :host([disabled]) #ramp + .handle { - fill: ButtonFace; background-color: ButtonFace; + fill: ButtonFace; } } - -:host { - --spectrum-slider-track-color: var(--system-spectrum-slider-track-color); - --spectrum-slider-track-fill-color: var( - --system-spectrum-slider-track-fill-color - ); - --spectrum-slider-ramp-track-color: var( - --system-spectrum-slider-ramp-track-color - ); - --spectrum-slider-ramp-track-color-disabled: var( - --system-spectrum-slider-ramp-track-color-disabled - ); - --spectrum-slider-handle-background-color: var( - --system-spectrum-slider-handle-background-color - ); - --spectrum-slider-handle-background-color-disabled: var( - --system-spectrum-slider-handle-background-color-disabled - ); - --spectrum-slider-ramp-handle-background-color: var( - --system-spectrum-slider-ramp-handle-background-color - ); - --spectrum-slider-ticks-handle-background-color: var( - --system-spectrum-slider-ticks-handle-background-color - ); - --spectrum-slider-handle-border-color: var( - --system-spectrum-slider-handle-border-color - ); - --spectrum-slider-handle-disabled-background-color: var( - --system-spectrum-slider-handle-disabled-background-color - ); - --spectrum-slider-tick-mark-color: var( - --system-spectrum-slider-tick-mark-color - ); - --spectrum-slider-handle-border-color-hover: var( - --system-spectrum-slider-handle-border-color-hover - ); - --spectrum-slider-handle-border-color-down: var( - --system-spectrum-slider-handle-border-color-down - ); - --spectrum-slider-handle-border-color-key-focus: var( - --system-spectrum-slider-handle-border-color-key-focus - ); - --spectrum-slider-handle-focus-ring-color-key-focus: var( - --system-spectrum-slider-handle-focus-ring-color-key-focus - ); -} diff --git a/packages/split-button/package.json b/packages/split-button/package.json index e0d6664eed..ce259510b2 100644 --- a/packages/split-button/package.json +++ b/packages/split-button/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/split-button-overrides.css.js": "./src/split-button-overrides.css.js", "./src/split-button.css.js": "./src/split-button.css.js", "./sp-split-button.js": { "development": "./sp-split-button.dev.js", diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts index c61735c2a8..7e6c31c482 100644 --- a/packages/split-button/src/SplitButton.ts +++ b/packages/split-button/src/SplitButton.ts @@ -32,6 +32,7 @@ import { PickerBase } from '@spectrum-web-components/picker'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import styles from './split-button.css.js'; const chevronClass = { @@ -51,7 +52,7 @@ export type SplitButtonTypes = 'field' | 'more'; **/ export class SplitButton extends SizedMixin(PickerBase) { public static override get styles(): CSSResultArray { - return [styles, chevronStyles]; + return [styles, chevronStyles, chevronIconOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/split-button/src/split-button-overrides.css b/packages/split-button/src/split-button-overrides.css new file mode 100644 index 0000000000..adb02e4bc1 --- /dev/null +++ b/packages/split-button/src/split-button-overrides.css @@ -0,0 +1,251 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-splitbutton-trigger-border-left: 0; + --spectrum-splitbutton-trigger-min-width: 0; + --spectrum-spltibutton-margin-left: 0; + --spectrum-splitbutton-icon-gap: var(--spectrum-global-dimension-size-150); + --spectrum-splitbutton-border-radius-edge: var( + --spectrum-alias-border-radius-small + ); +} + +:host([dir='rtl']), +:host([dir='rtl']) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +} + +.trigger { + --spectrum-splitbutton-trigger-round-edge-padding: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-splitbutton-trigger-flat-edge-padding: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc( + var(--spectrum-splitbutton-trigger-flat-edge-padding) - + var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ) + ); +} + +#button { + --spectrum-splitbutton-flat-edge-padding: calc( + var(--spectrum-button-m-primary-outline-texticon-padding-left) - + var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ) * 2 + ); + --spectrum-splitbutton-round-edge-padding: var( + --spectrum-button-m-primary-outline-texticon-padding-right, + var(--spectrum-global-dimension-size-200) + ); + --spectrum-splitbutton-cta-flat-edge-padding: calc( + var(--spectrum-button-m-primary-outline-texticon-padding-left) - + var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ) * 3 + ); +} + +:host { + vertical-align: top; + flex-direction: row; + display: inline-flex; + position: relative; +} + +#button { + border-start-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + margin-inline-start: 0; + padding-inline-start: var(--spectrum-splitbutton-round-edge-padding); + padding-inline-end: var(--spectrum-splitbutton-flat-edge-padding); +} + +#button[variant='accent'] { + margin-inline-end: var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ); + padding-inline-end: var(--spectrum-splitbutton-cta-flat-edge-padding); +} + +#button:after { + border-start-end-radius: var(--spectrum-splitbutton-border-radius-edge); + border-end-end-radius: var(--spectrum-splitbutton-border-radius-edge); +} + +.trigger { + border-inline-start-width: var(--spectrum-splitbutton-trigger-border-left); + min-inline-size: var(--spectrum-splitbutton-trigger-min-width); + border-start-start-radius: 0; + border-start-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-start-radius: 0; + margin-inline-start: 0; + padding-inline-start: var(--spectrum-splitbutton-trigger-flat-edge-padding); + padding-inline-end: var(--spectrum-splitbutton-trigger-round-edge-padding); +} + +.trigger[variant='accent'] { + border-inline-start-width: var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ); + padding-inline-start: var( + --spectrum-splitbutton-cta-trigger-flat-edge-padding + ); +} + +.trigger:focus-visible { + box-shadow: none; +} + +.trigger:after { + border-start-start-radius: var(--spectrum-splitbutton-border-radius-edge); + border-end-start-radius: var(--spectrum-splitbutton-border-radius-edge); +} + +.icon { + margin-block-start: 1px; + display: block; +} + +#button, +.trigger { + position: relative; +} + +#button:focus-visible, +.trigger:focus-visible { + z-index: 1; + outline: none; +} + +#button.spectrum-Pagination-prevButton .spectrum-Icon, +.trigger.spectrum-Pagination-prevButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation,) rotate(180deg); +} + +#button.spectrum-Pagination-nextButton .spectrum-Icon, +.trigger.spectrum-Pagination-nextButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation); +} + +#button .label + .spectrum-Icon { + margin-inline-start: var(--spectrum-splitbutton-icon-gap); +} + +:host([left]) #button { + border-start-start-radius: 0; + border-start-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-start-radius: 0; + margin-inline-start: var(--spectrum-spltibutton-margin-left); + margin-inline-end: 0; + padding-inline-start: var(--spectrum-splitbutton-flat-edge-padding); + padding-inline-end: var(--spectrum-splitbutton-round-edge-padding); +} + +:host([left]) #button:after { + border-start-start-radius: var(--spectrum-splitbutton-border-radius-edge); + border-start-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-end-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-end-start-radius: var(--spectrum-splitbutton-border-radius-edge); +} + +:host([left]) #button[variant='accent'] { + margin-inline-start: var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ); + padding-inline-start: var(--spectrum-splitbutton-cta-flat-edge-padding); +} + +:host([left]) .trigger { + border-inline-start-width: var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ); + border-inline-end-width: var(--spectrum-splitbutton-trigger-border-left); + border-start-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + margin-inline-end: 0; + padding-inline-start: var( + --spectrum-splitbutton-trigger-round-edge-padding + ); + padding-inline-end: var(--spectrum-splitbutton-trigger-flat-edge-padding); +} + +:host([left]) .trigger:after { + border-start-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); + border-start-end-radius: var(--spectrum-splitbutton-border-radius-edge); + border-end-end-radius: var(--spectrum-splitbutton-border-radius-edge); + border-end-start-radius: var( + --spectrum-button-m-primary-outline-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ); +} + +:host([left]) .trigger[variant='accent'] { + border-inline-end-width: var( + --spectrum-button-m-primary-outline-texticon-border-size, + var(--spectrum-alias-border-size-thick) + ); + padding-inline-end: var( + --spectrum-splitbutton-cta-trigger-flat-edge-padding + ); +} diff --git a/packages/split-button/src/split-button.css b/packages/split-button/src/split-button.css index 76c2db6d82..9ccf136598 100644 --- a/packages/split-button/src/split-button.css +++ b/packages/split-button/src/split-button.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-split-button.css'); +@import url('./split-button-overrides.css'); :host > sp-menu { display: none; diff --git a/packages/split-view/package.json b/packages/split-view/package.json index b905906fdb..5705c35786 100644 --- a/packages/split-view/package.json +++ b/packages/split-view/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/split-view-overrides.css.js": "./src/split-view-overrides.css.js", "./src/split-view.css.js": "./src/split-view.css.js", "./src/types.js": { "development": "./src/types.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/splitview": "^5.1.0" + "@spectrum-css/splitview": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index c354599ca2..bd59407e2e 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -12,29 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-splitview-vertical-width: 100%; - --spectrum-splitview-vertical-gripper-width: 50%; - --spectrum-splitview-vertical-gripper-outer-width: 100%; - --spectrum-splitview-vertical-gripper-reset: 0; - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); - --spectrum-splitview-handle-background-color-hover: var( - --spectrum-gray-400 - ); - --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); - --spectrum-splitview-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --spectrum-splitview-handle-width: var(--spectrum-border-width-200); - --spectrum-splitview-gripper-border-radius: var( - --spectrum-corner-radius-75 - ); - --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); - --spectrum-splitview-gripper-height: 16px; - --spectrum-splitview-gripper-border-width-horizontal: 3px; - --spectrum-splitview-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); display: flex; overflow: hidden; } @@ -45,6 +22,10 @@ governing permissions and limitations under the License. --mod-splitview-background-color, var(--spectrum-splitview-background-color) ); + color: var( + --mod-splitview-content-color, + var(--spectrum-splitview-content-color) + ); } #gripper { diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css new file mode 100644 index 0000000000..bf8a6170f7 --- /dev/null +++ b/packages/split-view/src/split-view-overrides.css @@ -0,0 +1,57 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-splitview-vertical-width: var( + --system-split-view-vertical-width + ); + --spectrum-splitview-vertical-gripper-width: var( + --system-split-view-vertical-gripper-width + ); + --spectrum-splitview-vertical-gripper-outer-width: var( + --system-split-view-vertical-gripper-outer-width + ); + --spectrum-splitview-vertical-gripper-reset: var( + --system-split-view-vertical-gripper-reset + ); + --spectrum-splitview-background-color: var( + --system-split-view-background-color + ); + --spectrum-splitview-content-color: var(--system-split-view-content-color); + --spectrum-splitview-handle-background-color: var( + --system-split-view-handle-background-color + ); + --spectrum-splitview-handle-background-color-hover: var( + --system-split-view-handle-background-color-hover + ); + --spectrum-splitview-handle-background-color-down: var( + --system-split-view-handle-background-color-down + ); + --spectrum-splitview-handle-background-color-focus: var( + --system-split-view-handle-background-color-focus + ); + --spectrum-splitview-handle-width: var(--system-split-view-handle-width); + --spectrum-splitview-gripper-border-radius: var( + --system-split-view-gripper-border-radius + ); + --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); + --spectrum-splitview-gripper-height: var( + --system-split-view-gripper-height + ); + --spectrum-splitview-gripper-border-width-horizontal: var( + --system-split-view-gripper-border-width-horizontal + ); + --spectrum-splitview-gripper-border-width-vertical: var( + --system-split-view-gripper-border-width-vertical + ); +} diff --git a/packages/split-view/src/split-view.css b/packages/split-view/src/split-view.css index d29f9944d0..2d065b3f34 100644 --- a/packages/split-view/src/split-view.css +++ b/packages/split-view/src/split-view.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-split-view.css'); +@import url('./split-view-overrides.css'); :host { --spectrum-split-view-first-pane-size: 50%; diff --git a/packages/status-light/package.json b/packages/status-light/package.json index 5249a0ead8..c5254bb1d5 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/status-light-overrides.css.js": "./src/status-light-overrides.css.js", "./src/status-light.css.js": "./src/status-light.css.js", "./sp-status-light.js": { "development": "./sp-status-light.dev.js", @@ -60,7 +61,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/statuslight": "^7.1.0" + "@spectrum-css/statuslight": "^8.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 0f78521f12..801a523072 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -11,193 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([dir]) { - --spectrum-statuslight-corner-radius: 50%; - --spectrum-statuslight-font-weight: 400; - --spectrum-statuslight-border-width: var(--spectrum-border-width-100); - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --spectrum-statuslight-line-height: var(--spectrum-line-height-100); - --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - --spectrum-statuslight-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --spectrum-statuslight-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-statuslight-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-statuslight-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-statuslight-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --spectrum-statuslight-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --spectrum-statuslight-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --spectrum-statuslight-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --spectrum-statuslight-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --spectrum-statuslight-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --spectrum-statuslight-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --spectrum-statuslight-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --spectrum-statuslight-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --spectrum-statuslight-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --spectrum-statuslight-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --spectrum-statuslight-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --spectrum-statuslight-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --spectrum-statuslight-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --spectrum-statuslight-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --spectrum-statuslight-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --spectrum-statuslight-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --spectrum-statuslight-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --spectrum-statuslight-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --spectrum-statuslight-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); -} - -:host([size='s']) { - --spectrum-statuslight-height: var(--spectrum-component-height-75); - --spectrum-statuslight-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - --spectrum-statuslight-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --spectrum-statuslight-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); -} - -:host { - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - --spectrum-statuslight-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --spectrum-statuslight-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); -} - -:host([size='l']) { - --spectrum-statuslight-height: var(--spectrum-component-height-200); - --spectrum-statuslight-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - --spectrum-statuslight-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --spectrum-statuslight-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); -} - -:host([size='xl']) { - --spectrum-statuslight-height: var(--spectrum-component-height-300); - --spectrum-statuslight-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - --spectrum-statuslight-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --spectrum-statuslight-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); -} - -@media (forced-colors: active) { - :host([dir]) { - forced-color-adjust: none; - --highcontrast-statuslight-content-color-default: CanvasText; - --highcontrast-statuslight-subdued-content-color-default: CanvasText; - } - - :host:before { - border: var( - --mod-statuslight-border-width, - var(--spectrum-statuslight-border-width) - ) - solid ButtonText; - } -} - :host([dir]) { min-block-size: var( --mod-statuslight-height, @@ -247,6 +60,16 @@ governing permissions and limitations under the License. } :host:before { + --spectrum-statuslight-spacing-computed-top-to-dot: calc( + var( + --mod-statuslight-spacing-top-to-dot, + var(--spectrum-statuslight-spacing-top-to-dot) + ) - + var( + --mod-statuslight-spacing-top-to-label, + var(--spectrum-statuslight-spacing-top-to-label) + ) + ); content: ''; inline-size: var( --mod-statuslight-dot-size, @@ -260,18 +83,6 @@ governing permissions and limitations under the License. --mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius) ); - --spectrum-statuslight-spacing-computed-top-to-dot: calc( - var( - --mod-statuslight-spacing-top-to-dot, - var(--spectrum-statuslight-spacing-top-to-dot) - ) - - var( - --mod-statuslight-spacing-top-to-label, - var(--spectrum-statuslight-spacing-top-to-label) - ) - ); - -ms-high-contrast-adjust: none; - forced-color-adjust: none; flex-grow: 0; flex-shrink: 0; margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); @@ -432,3 +243,20 @@ governing permissions and limitations under the License. var(--spectrum-statuslight-nonsemantic-magenta-color) ); } + +@media (forced-colors: active) { + :host([dir]) { + --highcontrast-statuslight-content-color-default: CanvasText; + --highcontrast-statuslight-subdued-content-color-default: CanvasText; + forced-color-adjust: none; + } + + :host:before { + forced-color-adjust: none; + border: var( + --mod-statuslight-border-width, + var(--spectrum-statuslight-border-width) + ) + solid ButtonText; + } +} diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css new file mode 100644 index 0000000000..9e4b38fe6c --- /dev/null +++ b/packages/status-light/src/status-light-overrides.css @@ -0,0 +1,189 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([dir]) { + --spectrum-statuslight-corner-radius: var( + --system-status-light-corner-radius + ); + --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); + --spectrum-statuslight-border-width: var( + --system-status-light-border-width + ); + --spectrum-statuslight-height: var(--system-status-light-height); + --spectrum-statuslight-dot-size: var(--system-status-light-dot-size); + --spectrum-statuslight-line-height: var(--system-status-light-line-height); + --spectrum-statuslight-line-height-cjk: var( + --system-status-light-line-height-cjk + ); + --spectrum-statuslight-font-size: var(--system-status-light-font-size); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-spacing-bottom-to-label + ); + --spectrum-statuslight-content-color-default: var( + --system-status-light-content-color-default + ); + --spectrum-statuslight-subdued-content-color-default: var( + --system-status-light-subdued-content-color-default + ); + --spectrum-statuslight-semantic-neutral-color: var( + --system-status-light-semantic-neutral-color + ); + --spectrum-statuslight-semantic-accent-color: var( + --system-status-light-semantic-accent-color + ); + --spectrum-statuslight-semantic-negative-color: var( + --system-status-light-semantic-negative-color + ); + --spectrum-statuslight-semantic-info-color: var( + --system-status-light-semantic-info-color + ); + --spectrum-statuslight-semantic-notice-color: var( + --system-status-light-semantic-notice-color + ); + --spectrum-statuslight-semantic-positive-color: var( + --system-status-light-semantic-positive-color + ); + --spectrum-statuslight-nonsemantic-gray-color: var( + --system-status-light-nonsemantic-gray-color + ); + --spectrum-statuslight-nonsemantic-red-color: var( + --system-status-light-nonsemantic-red-color + ); + --spectrum-statuslight-nonsemantic-orange-color: var( + --system-status-light-nonsemantic-orange-color + ); + --spectrum-statuslight-nonsemantic-yellow-color: var( + --system-status-light-nonsemantic-yellow-color + ); + --spectrum-statuslight-nonsemantic-chartreuse-color: var( + --system-status-light-nonsemantic-chartreuse-color + ); + --spectrum-statuslight-nonsemantic-celery-color: var( + --system-status-light-nonsemantic-celery-color + ); + --spectrum-statuslight-nonsemantic-green-color: var( + --system-status-light-nonsemantic-green-color + ); + --spectrum-statuslight-nonsemantic-seafoam-color: var( + --system-status-light-nonsemantic-seafoam-color + ); + --spectrum-statuslight-nonsemantic-cyan-color: var( + --system-status-light-nonsemantic-cyan-color + ); + --spectrum-statuslight-nonsemantic-blue-color: var( + --system-status-light-nonsemantic-blue-color + ); + --spectrum-statuslight-nonsemantic-indigo-color: var( + --system-status-light-nonsemantic-indigo-color + ); + --spectrum-statuslight-nonsemantic-purple-color: var( + --system-status-light-nonsemantic-purple-color + ); + --spectrum-statuslight-nonsemantic-fuchsia-color: var( + --system-status-light-nonsemantic-fuchsia-color + ); + --spectrum-statuslight-nonsemantic-magenta-color: var( + --system-status-light-nonsemantic-magenta-color + ); +} + +:host([size='s']) { + --spectrum-statuslight-height: var(--system-status-light-size-s-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size); + --spectrum-statuslight-font-size: var( + --system-status-light-size-s-font-size + ); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-s-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-s-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-s-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-s-spacing-bottom-to-label + ); +} + +:host { + --spectrum-statuslight-height: var(--system-status-light-size-m-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size); + --spectrum-statuslight-font-size: var( + --system-status-light-size-m-font-size + ); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-m-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-m-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-m-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-m-spacing-bottom-to-label + ); +} + +:host([size='l']) { + --spectrum-statuslight-height: var(--system-status-light-size-l-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size); + --spectrum-statuslight-font-size: var( + --system-status-light-size-l-font-size + ); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-l-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-l-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-l-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-l-spacing-bottom-to-label + ); +} + +:host([size='xl']) { + --spectrum-statuslight-height: var(--system-status-light-size-xl-height); + --spectrum-statuslight-dot-size: var( + --system-status-light-size-xl-dot-size + ); + --spectrum-statuslight-font-size: var( + --system-status-light-size-xl-font-size + ); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-xl-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-xl-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-xl-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-xl-spacing-bottom-to-label + ); +} diff --git a/packages/status-light/src/status-light.css b/packages/status-light/src/status-light.css index 7bcaadfc19..f1bc71cd83 100644 --- a/packages/status-light/src/status-light.css +++ b/packages/status-light/src/status-light.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-status-light.css'); +@import url('./status-light-overrides.css'); /* Force cascade position of [disabled] styling */ :host([disabled]):before { diff --git a/packages/swatch/package.json b/packages/swatch/package.json index ba987e5505..68408e2bee 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -37,7 +37,9 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/swatch-group-overrides.css.js": "./src/swatch-group-overrides.css.js", "./src/swatch-group.css.js": "./src/swatch-group.css.js", + "./src/swatch-overrides.css.js": "./src/swatch-overrides.css.js", "./src/swatch.css.js": "./src/swatch.css.js", "./sp-swatch.js": { "development": "./sp-swatch.dev.js", @@ -75,8 +77,8 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/swatch": "^6.1.0", - "@spectrum-css/swatchgroup": "^3.1.0" + "@spectrum-css/swatch": "^7.0.0-s2-foundations.15", + "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts index 0801d37d1a..7077cd3e35 100644 --- a/packages/swatch/src/Swatch.ts +++ b/packages/swatch/src/Swatch.ts @@ -30,6 +30,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js'; import styles from './swatch.css.js'; import dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js'; +import dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.css.js'; export type SwatchBorder = 'light' | 'none' | undefined; export type SwatchRounding = 'none' | 'full' | undefined; @@ -70,7 +71,12 @@ export class Swatch extends SizedMixin(Focusable, { noDefaultSize: true, }) { public static override get styles(): CSSResultArray { - return [opacityCheckerboardStyles, styles, dashStyles]; + return [ + opacityCheckerboardStyles, + styles, + dashStyles, + dashSmallOverrides, + ]; } @property({ reflect: true }) diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index 73e5976942..e0a56e8fc6 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -12,9 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50); - --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75); - --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100); justify-content: flex-start; align-items: flex-start; gap: var( diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index 22b6a24120..2af7c1ac63 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -11,72 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-swatch-focus-indicator-border-radius: 8px; - --spectrum-swatch-icon-border-color: #00000082; - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); - --spectrum-swatch-border-thickness-selected: var( - --spectrum-border-width-200 - ); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --spectrum-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --spectrum-swatch-disabled-icon-border-color: var( - --spectrum-swatch-disabled-icon-border-color - ); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); - --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); - --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); - --spectrum-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); -} - -:host([size='xs']) { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); -} - -:host([size='s']) { - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); -} - -:host { - --spectrum-swatch-size: var(--spectrum-swatch-size-medium); - --spectrum-swatch-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --spectrum-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); -} - -:host([size='l']) { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --spectrum-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); -} - @media (forced-colors: active) { :host { --highcontrast-swatch-disabled-icon-color: GrayText; @@ -210,6 +144,7 @@ governing permissions and limitations under the License. } :host([mixed-value]) .fill { + background: none; background: var(--spectrum-picked-color, transparent); } @@ -219,6 +154,7 @@ governing permissions and limitations under the License. } :host([nothing]) .fill { + background-color: initial; background-color: var(--spectrum-picked-color, transparent); background-image: none; } @@ -312,6 +248,10 @@ governing permissions and limitations under the License. inline-size: 100%; block-size: 100%; box-sizing: border-box; + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); justify-content: center; align-items: center; display: flex; @@ -319,18 +259,9 @@ governing permissions and limitations under the License. overflow: hidden; } -.fill, -.fill:before { - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); -} - .fill:before { content: ''; z-index: 0; - background-color: var(--spectrum-picked-color, transparent); box-shadow: inset 0 0 0 var( --mod-swatch-border-thickness, @@ -340,17 +271,42 @@ governing permissions and limitations under the License. --highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) ); + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); position: absolute; inset: 0; } +:host([border='none']) .fill:before, +.fill:before { + background-color: initial; + background-color: var(--spectrum-picked-color, transparent); +} + :host([border='none']) .fill:before { box-shadow: none; - background-color: var(--spectrum-picked-color, transparent); +} + +:host([border='light']) .fill:before { + box-shadow: inset 0 0 0 + var( + --mod-swatch-border-thickness, + var(--spectrum-swatch-border-thickness) + ) + var( + --highcontrast-swatch-border-color-light, + var( + --mod-swatch-border-color-light, + var(--spectrum-swatch-border-color-light) + ) + ); } .mixedValueIcon { pointer-events: none; + color: #0000; color: var(--spectrum-picked-color, transparent); display: none; } diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css new file mode 100644 index 0000000000..74e554f225 --- /dev/null +++ b/packages/swatch/src/swatch-group-overrides.css @@ -0,0 +1,24 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-swatchgroup-spacing-compact: var( + --system-swatch-group-spacing-compact + ); + --spectrum-swatchgroup-spacing-regular: var( + --system-swatch-group-spacing-regular + ); + --spectrum-swatchgroup-spacing-spacious: var( + --system-swatch-group-spacing-spacious + ); +} diff --git a/packages/swatch/src/swatch-group.css b/packages/swatch/src/swatch-group.css index 03e95742a6..8a55d2eb97 100644 --- a/packages/swatch/src/swatch-group.css +++ b/packages/swatch/src/swatch-group.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-swatch-group.css'); +@import url('./swatch-group-overrides.css'); diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css new file mode 100644 index 0000000000..124a1918c8 --- /dev/null +++ b/packages/swatch/src/swatch-overrides.css @@ -0,0 +1,99 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); + --spectrum-swatch-focus-indicator-border-radius: var( + --system-swatch-focus-indicator-border-radius + ); + --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); + --spectrum-swatch-border-thickness-selected: var( + --system-swatch-border-thickness-selected + ); + --spectrum-swatch-focus-indicator-thickness: var( + --system-swatch-focus-indicator-thickness + ); + --spectrum-swatch-focus-indicator-gap: var( + --system-swatch-focus-indicator-gap + ); + --spectrum-swatch-border-color-opacity: var( + --system-swatch-border-color-opacity + ); + --spectrum-swatch-border-color-light-opacity: var( + --system-swatch-border-color-light-opacity + ); + --spectrum-swatch-border-color: var(--system-swatch-border-color); + --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); + --spectrum-swatch-border-color-light: var( + --system-swatch-border-color-light + ); + --spectrum-swatch-border-color-selected: var( + --system-swatch-border-color-selected + ); + --spectrum-swatch-inner-border-color-selected: var( + --system-swatch-inner-border-color-selected + ); + --spectrum-swatch-disabled-icon-color: var( + --system-swatch-disabled-icon-color + ); + --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); + --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); + --spectrum-swatch-focus-indicator-color: var( + --system-swatch-focus-indicator-color + ); + --spectrum-swatch-size: var(--system-swatch-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); +} + +:host([size='xs']) { + --spectrum-swatch-size: var(--system-swatch-size-xs-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-xs-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-xs-slash-thickness + ); +} + +:host([size='s']) { + --spectrum-swatch-size: var(--system-swatch-size-s-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-s-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-s-slash-thickness + ); +} + +:host { + --spectrum-swatch-size: var(--system-swatch-size-m-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-m-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-m-slash-thickness + ); +} + +:host([size='l']) { + --spectrum-swatch-size: var(--system-swatch-size-l-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-l-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-l-slash-thickness + ); +} diff --git a/packages/swatch/src/swatch.css b/packages/swatch/src/swatch.css index de55830647..bacc4afb4d 100644 --- a/packages/swatch/src/swatch.css +++ b/packages/swatch/src/swatch.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-swatch.css'); +@import url('./swatch-overrides.css'); /** * Begin work around for https://github.com/adobe/spectrum-css/issues/1460 diff --git a/packages/switch/package.json b/packages/switch/package.json index f7eac1ad7f..11e0a75c2b 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -34,6 +34,7 @@ "default": "./src/index.js" }, "./src/switch-legacy.css.js": "./src/switch-legacy.css.js", + "./src/switch-overrides.css.js": "./src/switch-overrides.css.js", "./src/switch.css.js": "./src/switch.css.js", "./sp-switch.js": { "development": "./sp-switch.dev.js", @@ -62,7 +63,7 @@ "@spectrum-web-components/checkbox": "^0.47.2" }, "devDependencies": { - "@spectrum-css/switch": "^5.1.0" + "@spectrum-css/switch": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index 6a7a08770d..2dcc0d89f1 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -12,159 +12,10 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --spectrum-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --spectrum-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --spectrum-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); --spectrum-switch-focus-indicator-thickness: var( --mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness) ); - --spectrum-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - --spectrum-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); -} - -:host([disabled]) { - --spectrum-switch-label-color-default: var( - --spectrum-disabled-content-color - ); -} - -:host([emphasized]) { - --spectrum-switch-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --spectrum-switch-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --spectrum-switch-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --spectrum-switch-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-switch-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --spectrum-switch-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); -} - -:host([size='s']) { - --spectrum-switch-min-height: var(--spectrum-component-height-75); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); - --spectrum-switch-control-height: var( - --spectrum-switch-control-height-small - ); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); - --spectrum-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --spectrum-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-switch-font-size: var(--spectrum-font-size-75); -} - -:host { - --spectrum-switch-min-height: var(--spectrum-component-height-100); - --spectrum-switch-control-width: var( - --spectrum-switch-control-width-medium - ); - --spectrum-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --spectrum-switch-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --spectrum-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --spectrum-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-switch-font-size: var(--spectrum-font-size-100); -} - -:host([size='l']) { - --spectrum-switch-min-height: var(--spectrum-component-height-200); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); - --spectrum-switch-control-height: var( - --spectrum-switch-control-height-large - ); - --spectrum-switch-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --spectrum-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --spectrum-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-switch-font-size: var(--spectrum-font-size-200); -} - -:host([size='xl']) { - --spectrum-switch-min-height: var(--spectrum-component-height-300); - --spectrum-switch-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --spectrum-switch-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --spectrum-switch-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --spectrum-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --spectrum-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-switch-font-size: var(--spectrum-font-size-300); -} - -:host { min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); max-inline-size: 100%; vertical-align: top; @@ -445,7 +296,10 @@ governing permissions and limitations under the License. box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) + var( + --mod-focus-indicator-thickness, + var(--spectrum-switch-focus-indicator-thickness) + ) ) var( --highcontrast-switch-focus-indicator-color, @@ -608,7 +462,10 @@ governing permissions and limitations under the License. box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) + var( + --mod-focus-indicator-thickness, + var(--spectrum-switch-focus-indicator-thickness) + ) ) var( --highcontrast-switch-focus-indicator-color, @@ -737,7 +594,6 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { - forced-color-adjust: none; --highcontrast-switch-label-color-default: ButtonText; --highcontrast-switch-label-color-hover: ButtonText; --highcontrast-switch-label-color-down: ButtonText; @@ -760,6 +616,7 @@ governing permissions and limitations under the License. --highcontrast-switch-background-color-selected-focus: Highlight; --highcontrast-switch-background-color-selected-disabled: Highlight; --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; } #input:not(:checked) + #switch { @@ -773,39 +630,39 @@ governing permissions and limitations under the License. :host([disabled][checked]:hover) #input + #switch, :host([disabled][checked]:hover) #input + #switch { - box-shadow: inset 0 0 0 1px GrayText; background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; } :host([disabled][checked]:hover) #input + #switch:before, :host([disabled][checked]:hover) #input + #switch:before { - border-color: GrayText; background-color: ButtonFace; + border-color: GrayText; } } :host([disabled]) #input:not(:checked) + #switch, :host([disabled]) #input:not(:checked) + #switch { - box-shadow: inset 0 0 0 1px GrayText; background-color: ButtonFace; + box-shadow: inset 0 0 0 1px GrayText; } :host([disabled]) #input:not(:checked) + #switch:before, :host([disabled]) #input:not(:checked) + #switch:before { - border-color: GrayText; background-color: ButtonFace; + border-color: GrayText; } :host([disabled][checked]) #input + #switch, :host([disabled][checked]) #input + #switch { - box-shadow: inset 0 0 0 1px GrayText; background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; } :host([disabled][checked]) #input + #switch:before, :host([disabled][checked]) #input + #switch:before { - border-color: GrayText; background-color: ButtonFace; + border-color: GrayText; } :host([disabled]) #input ~ #label, @@ -813,30 +670,3 @@ governing permissions and limitations under the License. color: GrayText; } } - -:host { - --spectrum-switch-handle-border-color-default: var( - --system-spectrum-switch-handle-border-color-default - ); - --spectrum-switch-handle-border-color-hover: var( - --system-spectrum-switch-handle-border-color-hover - ); - --spectrum-switch-handle-border-color-down: var( - --system-spectrum-switch-handle-border-color-down - ); - --spectrum-switch-handle-border-color-focus: var( - --system-spectrum-switch-handle-border-color-focus - ); - --spectrum-switch-handle-border-color-selected-default: var( - --system-spectrum-switch-handle-border-color-selected-default - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --system-spectrum-switch-handle-border-color-selected-hover - ); - --spectrum-switch-handle-border-color-selected-down: var( - --system-spectrum-switch-handle-border-color-selected-down - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --system-spectrum-switch-handle-border-color-selected-focus - ); -} diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css new file mode 100644 index 0000000000..93e1dcb225 --- /dev/null +++ b/packages/switch/src/switch-overrides.css @@ -0,0 +1,184 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-switch-handle-border-color-default: var( + --system-switch-handle-border-color-default + ); + --spectrum-switch-handle-border-color-hover: var( + --system-switch-handle-border-color-hover + ); + --spectrum-switch-handle-border-color-down: var( + --system-switch-handle-border-color-down + ); + --spectrum-switch-handle-border-color-focus: var( + --system-switch-handle-border-color-focus + ); + --spectrum-switch-handle-border-color-selected-default: var( + --system-switch-handle-border-color-selected-default + ); + --spectrum-switch-handle-border-color-selected-hover: var( + --system-switch-handle-border-color-selected-hover + ); + --spectrum-switch-handle-border-color-selected-down: var( + --system-switch-handle-border-color-selected-down + ); + --spectrum-switch-handle-border-color-selected-focus: var( + --system-switch-handle-border-color-selected-focus + ); + --spectrum-switch-label-color-default: var( + --system-switch-label-color-default + ); + --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); + --spectrum-switch-label-color-down: var(--system-switch-label-color-down); + --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); + --spectrum-switch-label-color-disabled: var( + --system-switch-label-color-disabled + ); + --spectrum-switch-background-color: var(--system-switch-background-color); + --spectrum-switch-background-color-disabled: var( + --system-switch-background-color-disabled + ); + --spectrum-switch-background-color-selected-disabled: var( + --system-switch-background-color-selected-disabled + ); + --spectrum-switch-background-color-selected-default: var( + --system-switch-background-color-selected-default + ); + --spectrum-switch-background-color-selected-hover: var( + --system-switch-background-color-selected-hover + ); + --spectrum-switch-background-color-selected-down: var( + --system-switch-background-color-selected-down + ); + --spectrum-switch-background-color-selected-focus: var( + --system-switch-background-color-selected-focus + ); + --spectrum-switch-focus-indicator-thickness: var( + --system-switch-focus-indicator-thickness + ); + --spectrum-switch-focus-indicator-color: var( + --system-switch-focus-indicator-color + ); + --spectrum-switch-handle-background-color: var( + --system-switch-handle-background-color + ); + --spectrum-switch-handle-border-color-disabled: var( + --system-switch-handle-border-color-disabled + ); +} + +:host([disabled]) { + --spectrum-switch-label-color-default: var( + --system-switch-disabled-label-color-default + ); +} + +:host([emphasized]) { + --spectrum-switch-background-color-selected-default: var( + --system-switch-emphasized-background-color-selected-default + ); + --spectrum-switch-background-color-selected-hover: var( + --system-switch-emphasized-background-color-selected-hover + ); + --spectrum-switch-background-color-selected-down: var( + --system-switch-emphasized-background-color-selected-down + ); + --spectrum-switch-background-color-selected-focus: var( + --system-switch-emphasized-background-color-selected-focus + ); + --spectrum-switch-handle-border-color-selected-default: var( + --system-switch-emphasized-handle-border-color-selected-default + ); + --spectrum-switch-handle-border-color-selected-hover: var( + --system-switch-emphasized-handle-border-color-selected-hover + ); + --spectrum-switch-handle-border-color-selected-down: var( + --system-switch-emphasized-handle-border-color-selected-down + ); + --spectrum-switch-handle-border-color-selected-focus: var( + --system-switch-emphasized-handle-border-color-selected-focus + ); +} + +:host([size='s']) { + --spectrum-switch-min-height: var(--system-switch-size-s-min-height); + --spectrum-switch-control-width: var(--system-switch-size-s-control-width); + --spectrum-switch-control-height: var( + --system-switch-size-s-control-height + ); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-s-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-s-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-s-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-s-font-size); +} + +:host { + --spectrum-switch-min-height: var(--system-switch-size-m-min-height); + --spectrum-switch-control-width: var(--system-switch-size-m-control-width); + --spectrum-switch-control-height: var( + --system-switch-size-m-control-height + ); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-m-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-m-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-m-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-m-font-size); +} + +:host([size='l']) { + --spectrum-switch-min-height: var(--system-switch-size-l-min-height); + --spectrum-switch-control-width: var(--system-switch-size-l-control-width); + --spectrum-switch-control-height: var( + --system-switch-size-l-control-height + ); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-l-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-l-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-l-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-l-font-size); +} + +:host([size='xl']) { + --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); + --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); + --spectrum-switch-control-height: var( + --system-switch-size-xl-control-height + ); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-xl-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-xl-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-xl-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); +} diff --git a/packages/switch/src/switch.css b/packages/switch/src/switch.css index 9f38b6ca61..6a48a80cab 100644 --- a/packages/switch/src/switch.css +++ b/packages/switch/src/switch.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-switch.css'); +@import url('./switch-overrides.css'); :host([disabled]) { pointer-events: none; diff --git a/packages/table/package.json b/packages/table/package.json index 967e1f45d1..cd2e14df27 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -58,10 +58,16 @@ "default": "./src/index.js" }, "./src/table-body.css.js": "./src/table-body.css.js", + "./src/table-cell-overrides.css.js": "./src/table-cell-overrides.css.js", "./src/table-cell.css.js": "./src/table-cell.css.js", + "./src/table-checkbox-cell-overrides.css.js": "./src/table-checkbox-cell-overrides.css.js", "./src/table-checkbox-cell.css.js": "./src/table-checkbox-cell.css.js", + "./src/table-head-cell-overrides.css.js": "./src/table-head-cell-overrides.css.js", "./src/table-head-cell.css.js": "./src/table-head-cell.css.js", + "./src/table-head-overrides.css.js": "./src/table-head-overrides.css.js", "./src/table-head.css.js": "./src/table-head.css.js", + "./src/table-overrides.css.js": "./src/table-overrides.css.js", + "./src/table-row-overrides.css.js": "./src/table-row-overrides.css.js", "./src/table-row.css.js": "./src/table-row.css.js", "./src/table.css.js": "./src/table.css.js", "./elements.js": { @@ -123,7 +129,7 @@ "@spectrum-web-components/icons-ui": "^0.47.2" }, "devDependencies": { - "@spectrum-css/table": "^6.1.0" + "@spectrum-css/table": "^7.0.0-s2-foundations.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/table/src/TableHeadCell.ts b/packages/table/src/TableHeadCell.ts index 2b5eaaf945..b5bb665641 100644 --- a/packages/table/src/TableHeadCell.ts +++ b/packages/table/src/TableHeadCell.ts @@ -22,6 +22,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js'; import styles from './table-head-cell.css.js'; import arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js'; +import arrowOverrides from '@spectrum-web-components/icon/src/icon-arrow-overrides.css.js'; export type SortedEventDetails = { sortDirection: 'asc' | 'desc'; @@ -43,7 +44,7 @@ const ariaSortValue = (sortDirection?: 'asc' | 'desc'): string => { */ export class TableHeadCell extends SpectrumElement { public static override get styles(): CSSResultArray { - return [styles, arrowStyles]; + return [styles, arrowStyles, arrowOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css index 0ef53e835f..6ee65c89a5 100644 --- a/packages/table/src/spectrum-table-body.css +++ b/packages/table/src/spectrum-table-body.css @@ -21,6 +21,7 @@ governing permissions and limitations under the License. } :host([drop-target]) { + --spectrum-table-border-color: transparent; outline-width: var( --mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness) @@ -33,7 +34,6 @@ governing permissions and limitations under the License. var(--spectrum-table-drop-zone-outline-color) ) ); - --mod-table-border-color: transparent; } :host { diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css index 7b3f463be0..5ddcf20ffc 100644 --- a/packages/table/src/spectrum-table-cell.css +++ b/packages/table/src/spectrum-table-cell.css @@ -102,6 +102,12 @@ governing permissions and limitations under the License. ) ) ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * -1 + ); outline-offset: calc( var( --mod-table-focus-indicator-thickness, diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css index 0caee7d046..0ffde28e3f 100644 --- a/packages/table/src/spectrum-table-checkbox-cell.css +++ b/packages/table/src/spectrum-table-checkbox-cell.css @@ -47,6 +47,7 @@ governing permissions and limitations under the License. --mod-table-header-line-height, var(--spectrum-table-row-line-height) ); + text-transform: none; text-transform: var(--mod-table-header-text-transform, none); block-size: var( --mod-table-min-header-height, @@ -81,6 +82,7 @@ governing permissions and limitations under the License. ) ) ease-in-out; + cursor: auto; cursor: var(--mod-table-cursor-header-default, initial); border-radius: 0; outline: 0; @@ -166,6 +168,12 @@ governing permissions and limitations under the License. ) ) ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * -1 + ); outline-offset: calc( var( --mod-table-focus-indicator-thickness, diff --git a/packages/table/src/spectrum-table-head-cell.css b/packages/table/src/spectrum-table-head-cell.css index 910334d949..57bac6b077 100644 --- a/packages/table/src/spectrum-table-head-cell.css +++ b/packages/table/src/spectrum-table-head-cell.css @@ -60,6 +60,7 @@ governing permissions and limitations under the License. --mod-table-header-line-height, var(--spectrum-table-row-line-height) ); + text-transform: none; text-transform: var(--mod-table-header-text-transform, none); block-size: var( --mod-table-min-header-height, @@ -94,6 +95,7 @@ governing permissions and limitations under the License. ) ) ease-in-out; + cursor: auto; cursor: var(--mod-table-cursor-header-default, initial); border-radius: 0; outline: 0; @@ -105,6 +107,7 @@ governing permissions and limitations under the License. } :host([sortable]) { + cursor: pointer; cursor: var(--mod-table-cursor-header-sortable, pointer); } @@ -169,6 +172,12 @@ governing permissions and limitations under the License. ) ) ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * -1 + ); outline-offset: calc( var( --mod-table-focus-indicator-thickness, diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css index 2a2c47a92d..85ff8f0591 100644 --- a/packages/table/src/spectrum-table-row.css +++ b/packages/table/src/spectrum-table-row.css @@ -130,6 +130,7 @@ governing permissions and limitations under the License. ) ) ease-in-out; + cursor: pointer; cursor: var(--mod-table-cursor-row-default, pointer); border-block-start: none; position: relative; @@ -202,7 +203,8 @@ governing permissions and limitations under the License. --highcontrast-table-selected-row-text-color ); --spectrum-table-cell-background-color: var( - --spectrum-table-selected-cell-background-color + --highcontrast-table-selected-row-background-color, + var(--spectrum-table-selected-cell-background-color) ); } @@ -215,7 +217,8 @@ governing permissions and limitations under the License. --highcontrast-table-selected-row-text-color-focus ); --spectrum-table-cell-background-color: var( - --spectrum-table-selected-cell-background-color-focus + --highcontrast-table-selected-row-background-color-focus, + var(--spectrum-table-selected-cell-background-color-focus) ); } @@ -237,6 +240,10 @@ governing permissions and limitations under the License. } :host([drop-target]) { + --spectrum-table-border-color: var( + --highcontrast-table-focus-indicator-color, + transparent + ); outline-width: var( --mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness) @@ -255,10 +262,6 @@ governing permissions and limitations under the License. var(--spectrum-table-focus-indicator-thickness) ) * -1 ); - --mod-table-border-color: var( - --highcontrast-table-focus-indicator-color, - transparent - ); } :host([drop-target]) ::slotted(*) { @@ -319,6 +322,7 @@ governing permissions and limitations under the License. var(--spectrum-table-section-header-background-color) ) ); + cursor: auto; cursor: var(--mod-table-cursor-section-header, initial); } @@ -496,7 +500,8 @@ governing permissions and limitations under the License. --highcontrast-table-selected-row-text-color-focus ); --spectrum-table-cell-background-color: var( - --spectrum-table-selected-cell-background-color-focus + --highcontrast-table-selected-row-background-color-focus, + var(--spectrum-table-selected-cell-background-color-focus) ); } diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css index 01ba234133..5bd999c628 100644 --- a/packages/table/src/spectrum-table.css +++ b/packages/table/src/spectrum-table.css @@ -11,140 +11,41 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@media (forced-colors: active) { + :host { + --highcontrast-table-row-background-color: Canvas; + --highcontrast-table-row-text-color: CanvasText; + --highcontrast-table-divider-color: CanvasText; + --highcontrast-table-border-color: CanvasText; + --highcontrast-table-icon-color: CanvasText; + --highcontrast-table-icon-color-focus: Highlight; + --highcontrast-table-selected-row-background-color: Highlight; + --highcontrast-table-selected-row-text-color: HighlightText; + --highcontrast-table-selected-row-text-color-default: HighlightText; + --highcontrast-table-selected-row-background-color-focus: Highlight; + --highcontrast-table-selected-row-text-color-focus: HighlightText; + --highcontrast-table-row-background-color-hover: Highlight; + --highcontrast-table-row-text-color-hover: HighlightText; + --highcontrast-table-section-header-text-color: Canvas; + --highcontrast-table-section-header-background-color: CanvasText; + --highcontrast-table-focus-indicator-color: Highlight; + --highcontrast-table-transition-duration: 0; + } + + @supports (color: SelectedItem) { + :host { + --highcontrast-table-selected-row-background-color: SelectedItem; + --highcontrast-table-selected-row-text-color: SelectedItemText; + --highcontrast-table-selected-row-text-color-default: SelectedItemText; + } + } +} + :host { - --spectrum-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --spectrum-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --spectrum-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --spectrum-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --spectrum-table-border-radius: var(--spectrum-corner-radius-100); - --spectrum-table-border-width: var(--spectrum-table-border-divider-width); - --spectrum-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-default-vertical-align: top; - --spectrum-table-header-vertical-align: middle; - --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); - --spectrum-table-row-font-style: var(--spectrum-default-font-style); - --spectrum-table-row-font-size: var(--spectrum-font-size-100); - --spectrum-table-row-line-height: var(--spectrum-line-height-100); - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); - --spectrum-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-50); - --spectrum-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --spectrum-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --spectrum-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --spectrum-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --spectrum-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --spectrum-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --spectrum-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --spectrum-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --spectrum-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --spectrum-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --spectrum-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --spectrum-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --spectrum-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-table-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --spectrum-table-drop-zone-outline-color: var( - --spectrum-accent-visual-color - ); - --spectrum-table-transition-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); - --spectrum-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --spectrum-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-section-header-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --spectrum-table-collapsible-disclosure-inline-spacing: 0px; - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular + --mod-thumbnail-size: var( + --mod-table-thumbnail-size, + var(--spectrum-table-thumbnail-size) ); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); --spectrum-table-cell-background-color: var( --highcontrast-table-row-background-color, var( @@ -168,10 +69,6 @@ governing permissions and limitations under the License. ) ) ); - --mod-thumbnail-size: var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ); } :host:dir(rtl), @@ -179,343 +76,226 @@ governing permissions and limitations under the License. --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } -:host([size='s']) { - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --spectrum-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --spectrum-table-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --spectrum-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --spectrum-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-row-font-size: var(--spectrum-font-size-75); - --spectrum-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --spectrum-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --spectrum-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --spectrum-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); - --spectrum-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); -} - -:host([size='l']) { - --spectrum-table-min-header-height: var(--spectrum-component-height-200); - --spectrum-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --spectrum-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --spectrum-table-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --spectrum-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --spectrum-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-row-font-size: var(--spectrum-font-size-200); - --spectrum-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --spectrum-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --spectrum-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --spectrum-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); - --spectrum-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); +:host:not(.spectrum-Table-scroller) { + border-collapse: initial; + border-spacing: 0; } -:host([size='xl']) { - --spectrum-table-min-header-height: var(--spectrum-component-height-300); - --spectrum-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --spectrum-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --spectrum-table-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --spectrum-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --spectrum-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-row-font-size: var(--spectrum-font-size-300); - --spectrum-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --spectrum-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --spectrum-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --spectrum-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); - --spectrum-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); +:host:not(.spectrum-Table-scroller) { + display: table; } :host([density='compact']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200) ); } :host([density='compact'][size='s']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50) ); } :host([density='compact'][size='l']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300) ); } :host([density='compact'][size='xl']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500) ); } :host([density='spacious']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500) ); } :host([density='spacious'][size='s']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300) ); } :host([density='spacious'][size='l']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700) ); } :host([density='spacious'][size='xl']) { - --mod-table-min-row-height: var( + --spectrum-table-min-row-height: var( --mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious) ); - --mod-table-row-top-to-text: var( + --spectrum-table-row-top-to-text: var( --mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious) ); - --mod-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text: var( --mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious) ); - --mod-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-block-spacing: var( --mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious) ); - --mod-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-block-spacing: var( --mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious) ); - --mod-table-thumbnail-size: var( + --spectrum-table-thumbnail-size: var( --mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800) ); @@ -539,56 +319,17 @@ governing permissions and limitations under the License. } :host([quiet]) { - --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --mod-table-outer-border-inline-width: var( + --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --spectrum-table-outer-border-inline-width: var( --mod-table-outer-border-inline-width--quiet, 0px ); - --mod-table-header-background-color: var( + --spectrum-table-header-background-color: var( --mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100) ); - --mod-table-row-background-color: var( + --spectrum-table-row-background-color: var( --mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100) ); } - -@media (forced-colors: active) { - :host { - --highcontrast-table-row-background-color: Canvas; - --highcontrast-table-row-text-color: CanvasText; - --highcontrast-table-divider-color: CanvasText; - --highcontrast-table-border-color: CanvasText; - --highcontrast-table-icon-color: CanvasText; - --highcontrast-table-icon-color-focus: Highlight; - --highcontrast-table-selected-row-background-color: Highlight; - --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; - --highcontrast-table-selected-row-background-color-focus: Highlight; - --highcontrast-table-selected-row-text-color-focus: HighlightText; - --highcontrast-table-row-background-color-hover: Highlight; - --highcontrast-table-row-text-color-hover: HighlightText; - --highcontrast-table-section-header-text-color: Canvas; - --highcontrast-table-section-header-background-color: CanvasText; - --highcontrast-table-focus-indicator-color: Highlight; - --highcontrast-table-transition-duration: 0; - } - - @supports (color: SelectedItem) { - :host { - --highcontrast-table-selected-row-background-color: SelectedItem; - --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; - } - } -} - -:host:not(.spectrum-Table-scroller) { - border-collapse: initial; - border-spacing: 0; -} - -:host:not(.spectrum-Table-scroller) { - display: table; -} diff --git a/packages/table/src/table-cell-overrides.css b/packages/table/src/table-cell-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/table/src/table-cell-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/table/src/table-cell.css b/packages/table/src/table-cell.css index ff882c246c..389988070c 100644 --- a/packages/table/src/table-cell.css +++ b/packages/table/src/table-cell.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table-cell.css'); +@import url('./table-cell-overrides.css'); :host { display: block; diff --git a/packages/table/src/table-checkbox-cell-overrides.css b/packages/table/src/table-checkbox-cell-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/table/src/table-checkbox-cell-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/table/src/table-checkbox-cell.css b/packages/table/src/table-checkbox-cell.css index ad3ef1bb3e..ee2cc2565a 100644 --- a/packages/table/src/table-checkbox-cell.css +++ b/packages/table/src/table-checkbox-cell.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table-checkbox-cell.css'); +@import url('./table-checkbox-cell-overrides.css'); :host { display: flex; diff --git a/packages/table/src/table-head-cell-overrides.css b/packages/table/src/table-head-cell-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/table/src/table-head-cell-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/table/src/table-head-cell.css b/packages/table/src/table-head-cell.css index 1bd37c4f9d..7c85dba789 100644 --- a/packages/table/src/table-head-cell.css +++ b/packages/table/src/table-head-cell.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table-head-cell.css'); +@import url('./table-head-cell-overrides.css'); :host { display: block; diff --git a/packages/table/src/table-head-overrides.css b/packages/table/src/table-head-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/table/src/table-head-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/table/src/table-head.css b/packages/table/src/table-head.css index 8a480fb655..de98358ef8 100644 --- a/packages/table/src/table-head.css +++ b/packages/table/src/table-head.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table-head.css'); +@import url('./table-head-overrides.css'); :host { display: flex; diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css new file mode 100644 index 0000000000..ec09c68a16 --- /dev/null +++ b/packages/table/src/table-overrides.css @@ -0,0 +1,470 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text); + --spectrum-table-header-bottom-to-text: var( + --system-table-header-bottom-to-text + ); + --spectrum-table-min-header-height: var(--system-table-min-header-height); + --spectrum-table-min-row-height: var(--system-table-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text); + --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); + --spectrum-table-border-radius: var(--system-table-border-radius); + --spectrum-table-border-width: var(--system-table-border-width); + --spectrum-table-outer-border-inline-width: var( + --system-table-outer-border-inline-width + ); + --spectrum-table-icon-to-text: var(--system-table-icon-to-text); + --spectrum-table-default-vertical-align: var( + --system-table-default-vertical-align + ); + --spectrum-table-header-vertical-align: var( + --system-table-header-vertical-align + ); + --spectrum-table-header-font-weight: var(--system-table-header-font-weight); + --spectrum-table-row-font-family: var(--system-table-row-font-family); + --spectrum-table-row-font-weight: var(--system-table-row-font-weight); + --spectrum-table-row-font-style: var(--system-table-row-font-style); + --spectrum-table-row-font-size: var(--system-table-row-font-size); + --spectrum-table-row-line-height: var(--system-table-row-line-height); + --spectrum-table-border-color: var(--system-table-border-color); + --spectrum-table-divider-color: var(--system-table-divider-color); + --spectrum-table-header-background-color: var( + --system-table-header-background-color + ); + --spectrum-table-header-text-color: var(--system-table-header-text-color); + --spectrum-table-row-background-color: var( + --system-table-row-background-color + ); + --spectrum-table-row-text-color: var(--system-table-row-text-color); + --spectrum-table-selected-row-background-color: var( + --system-table-selected-row-background-color + ); + --spectrum-table-selected-row-background-color-non-emphasized: var( + --system-table-selected-row-background-color-non-emphasized + ); + --spectrum-table-row-background-color-hover: var( + --system-table-row-background-color-hover + ); + --spectrum-table-row-active-color: var(--system-table-row-active-color); + --spectrum-table-selected-row-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --spectrum-table-selected-row-background-color-non-emphasized-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --spectrum-table-icon-color-default: var(--system-table-icon-color-default); + --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); + --spectrum-table-icon-color-active: var(--system-table-icon-color-active); + --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); + --spectrum-table-icon-color-focus-hover: var( + --system-table-icon-color-focus-hover + ); + --spectrum-table-icon-color-key-focus: var( + --system-table-icon-color-key-focus + ); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-row-checkbox-block-spacing + ); + --spectrum-table-focus-indicator-thickness: var( + --system-table-focus-indicator-thickness + ); + --spectrum-table-focus-indicator-color: var( + --system-table-focus-indicator-color + ); + --spectrum-table-drop-zone-background-color: var( + --system-table-drop-zone-background-color + ); + --spectrum-table-drop-zone-outline-color: var( + --system-table-drop-zone-outline-color + ); + --spectrum-table-transition-duration: var( + --system-table-transition-duration + ); + --spectrum-table-summary-row-font-weight: var( + --system-table-summary-row-font-weight + ); + --spectrum-table-summary-row-background-color: var( + --system-table-summary-row-background-color + ); + --spectrum-table-section-header-min-height: var( + --system-table-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-section-header-block-end-spacing + ); + --spectrum-table-section-header-font-weight: var( + --system-table-section-header-font-weight + ); + --spectrum-table-section-header-background-color: var( + --system-table-section-header-background-color + ); + --spectrum-table-collapsible-tier-indent: var( + --system-table-collapsible-tier-indent + ); + --spectrum-table-collapsible-disclosure-inline-spacing: var( + --system-table-collapsible-disclosure-inline-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-disclosure-icon-size + ); + --spectrum-table-collapsible-icon-animation-duration: var( + --system-table-collapsible-icon-animation-duration + ); + --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size); + --spectrum-table-cell-background-color: var( + --system-table-cell-background-color + ); + --spectrum-table-selected-cell-background-color: var( + --system-table-selected-cell-background-color + ); + --spectrum-table-selected-cell-background-color-focus: var( + --system-table-selected-cell-background-color-focus + ); +} + +:host([size='s']) { + --spectrum-table-min-header-height: var( + --system-table-size-s-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-s-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-s-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height); + --spectrum-table-row-top-to-text: var( + --system-table-size-s-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-s-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-s-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-s-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-s-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-s-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-s-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-s-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-s-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size); +} + +:host([size='l']) { + --spectrum-table-min-header-height: var( + --system-table-size-l-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-l-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-l-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height); + --spectrum-table-row-top-to-text: var( + --system-table-size-l-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-l-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-l-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-l-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-l-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-l-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-l-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-l-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-l-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size); +} + +:host([size='xl']) { + --spectrum-table-min-header-height: var( + --system-table-size-xl-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-xl-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-xl-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var( + --system-table-size-xl-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-xl-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-xl-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-xl-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-xl-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-xl-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-xl-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-xl-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size); +} + +:host([density='compact']) { + --spectrum-table-min-row-height: var(--system-table-compact-min-row-height); + --spectrum-table-row-top-to-text: var( + --system-table-compact-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size); +} + +:host([density='compact'][size='s']) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-s-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-s-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-s-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-s-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-s-thumbnail-size + ); +} + +:host([density='compact'][size='l']) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-l-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-l-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-l-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-l-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-l-thumbnail-size + ); +} + +:host([density='compact'][size='xl']) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-xl-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-xl-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-xl-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-xl-thumbnail-size + ); +} + +:host([density='spacious']) { + --spectrum-table-min-row-height: var( + --system-table-spacious-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-thumbnail-size + ); +} + +:host([density='spacious'][size='s']) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-s-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-s-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-s-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-s-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-s-thumbnail-size + ); +} + +:host([density='spacious'][size='l']) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-l-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-l-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-l-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-l-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-l-thumbnail-size + ); +} + +:host([density='spacious'][size='xl']) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-xl-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-xl-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-xl-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-xl-thumbnail-size + ); +} + +:host([emphasized]) { + --spectrum-table-selected-cell-background-color: var( + --system-table-emphasized-selected-cell-background-color + ); + --spectrum-table-selected-cell-background-color-focus: var( + --system-table-emphasized-selected-cell-background-color-focus + ); +} + +:host([quiet]) { + --spectrum-table-border-radius: var(--system-table-quiet-border-radius); + --spectrum-table-outer-border-inline-width: var( + --system-table-quiet-outer-border-inline-width + ); + --spectrum-table-header-background-color: var( + --system-table-quiet-header-background-color + ); + --spectrum-table-row-background-color: var( + --system-table-quiet-row-background-color + ); +} diff --git a/packages/table/src/table-row-overrides.css b/packages/table/src/table-row-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/packages/table/src/table-row-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/packages/table/src/table-row.css b/packages/table/src/table-row.css index 73325c6af3..1e676227d5 100644 --- a/packages/table/src/table-row.css +++ b/packages/table/src/table-row.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table-row.css'); +@import url('./table-row-overrides.css'); :host, :host([role='row']) { diff --git a/packages/table/src/table.css b/packages/table/src/table.css index 6fb7da3a51..0a559f884b 100644 --- a/packages/table/src/table.css +++ b/packages/table/src/table.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-table.css'); +@import url('./table-overrides.css'); :host { display: flex; diff --git a/packages/tabs/package.json b/packages/tabs/package.json index c4111f2419..1567e342f8 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -48,6 +48,8 @@ "./src/tab-panel.css.js": "./src/tab-panel.css.js", "./src/tab.css.js": "./src/tab.css.js", "./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js", + "./src/tabs-overrides.css.js": "./src/tabs-overrides.css.js", + "./src/tabs-sizes-overrides.css.js": "./src/tabs-sizes-overrides.css.js", "./src/tabs-sizes.css.js": "./src/tabs-sizes.css.js", "./src/tabs.css.js": "./src/tabs.css.js", "./sp-tabs.js": { @@ -93,7 +95,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/tabs": "^5.1.0" + "@spectrum-css/tabs": "^6.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts index 3a9aa22d45..7d39269bb8 100644 --- a/packages/tabs/src/TabsOverflow.ts +++ b/packages/tabs/src/TabsOverflow.ts @@ -30,6 +30,7 @@ import { Tabs } from './Tabs.js'; import '@spectrum-web-components/action-button/sp-action-button.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; +import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js'; import tabSizes from './tabs-sizes.css.js'; import styles from './tabs-overflow.css.js'; @@ -42,7 +43,7 @@ interface TabsOverflowState { */ export class TabsOverflow extends SizedMixin(SpectrumElement) { public static override get styles(): CSSResultArray { - return [chevronIconStyles, styles, tabSizes]; + return [styles, tabSizes, chevronIconStyles, chevronIconOverrides]; } @property({ type: Boolean, reflect: true }) diff --git a/packages/tabs/src/spectrum-tabs-sizes.css b/packages/tabs/src/spectrum-tabs-sizes.css index 0b1aca0e31..0794c4005b 100644 --- a/packages/tabs/src/spectrum-tabs-sizes.css +++ b/packages/tabs/src/spectrum-tabs-sizes.css @@ -11,134 +11,58 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='s']) #list { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); - --spectrum-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --spectrum-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); - --spectrum-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); - --spectrum-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --spectrum-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --spectrum-tabs-font-size: var(--spectrum-font-size-75); -} - -:host([size='l']) #list { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); - --spectrum-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --spectrum-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); - --spectrum-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); - --spectrum-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --spectrum-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --spectrum-tabs-font-size: var(--spectrum-font-size-200); -} - -:host([size='xl']) #list { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); - --spectrum-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --spectrum-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --spectrum-tabs-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --spectrum-tabs-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --spectrum-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --spectrum-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --spectrum-tabs-font-size: var(--spectrum-font-size-300); -} - :host([size='s']) #list.spectrum-Tabs--compact { - --mod-tabs-item-height: var( + --spectrum-tabs-item-height: var( --mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small) ); - --mod-tabs-top-to-text: var( + --spectrum-tabs-top-to-text: var( --mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small) ); - --mod-tabs-bottom-to-text: var( + --spectrum-tabs-bottom-to-text: var( --mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small) ); - --mod-tabs-top-to-icon: var( + --spectrum-tabs-top-to-icon: var( --mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small) ); } :host([size='l']) #list.spectrum-Tabs--compact { - --mod-tabs-item-height: var( + --spectrum-tabs-item-height: var( --mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large) ); - --mod-tabs-top-to-text: var( + --spectrum-tabs-top-to-text: var( --mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large) ); - --mod-tabs-bottom-to-text: var( + --spectrum-tabs-bottom-to-text: var( --mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large) ); - --mod-tabs-top-to-icon: var( + --spectrum-tabs-top-to-icon: var( --mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large) ); } :host([size='xl']) #list.spectrum-Tabs--compact { - --mod-tabs-item-height: var( + --spectrum-tabs-item-height: var( --mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large) ); - --mod-tabs-top-to-text: var( + --spectrum-tabs-top-to-text: var( --mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large) ); - --mod-tabs-bottom-to-text: var( + --spectrum-tabs-bottom-to-text: var( --mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large) ); - --mod-tabs-top-to-icon: var( + --spectrum-tabs-top-to-icon: var( --mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large) ); diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index 00c1ff9f56..b1f3f3a08c 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -11,134 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -#list { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); - --spectrum-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --spectrum-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --spectrum-tabs-start-to-edge: var( - --spectrum-tab-item-start-to-edge-medium - ); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --spectrum-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --spectrum-tabs-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --spectrum-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --spectrum-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --spectrum-tabs-color-disabled: var(--spectrum-gray-500); - --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-tabs-font-style: var(--spectrum-default-font-style); - --spectrum-tabs-font-size: var(--spectrum-font-size-100); - --spectrum-tabs-line-height: var(--spectrum-line-height-100); - --spectrum-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --spectrum-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --spectrum-tabs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-tabs-list-background-direction: top; - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); - --spectrum-tabs-divider-size: var(--spectrum-border-width-200); - --spectrum-tabs-divider-border-radius: 1px; - --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); -} - -:host([emphasized]) #list { - --mod-tabs-color-selected: var( - --mod-tabs-color-selected-emphasized, - var(--spectrum-accent-content-color-default) - ); - --mod-tabs-color-hover: var( - --mod-tabs-color-hover-emphasized, - var(--spectrum-accent-content-color-hover) - ); - --mod-tabs-color-key-focus: var( - --mod-tabs-color-key-focus-emphasized, - var(--spectrum-accent-content-color-key-focus) - ); - --mod-tabs-selection-indicator-color: var( - --mod-tabs-selection-indicator-color-emphasized, - var(--spectrum-accent-content-color-default) - ); -} - -:host([direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); -} - -:host([direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical-right, - left - ); -} - -:host([direction^='vertical']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - left - ); -} - -:host([direction^='vertical-right']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); -} - -:host([compact]) #list { - --mod-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-medium) - ); - --mod-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --mod-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --mod-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) - ); -} - #list { z-index: 0; vertical-align: top; @@ -165,6 +37,25 @@ governing permissions and limitations under the License. position: relative; } +:host([emphasized]) #list { + --mod-tabs-color-selected: var( + --mod-tabs-color-selected-emphasized, + var(--spectrum-tabs-color-selected) + ); + --mod-tabs-color-hover: var( + --mod-tabs-color-hover-emphasized, + var(--spectrum-tabs-color-hover) + ); + --mod-tabs-color-key-focus: var( + --mod-tabs-color-key-focus-emphasized, + var(--spectrum-tabs-color-key-focus) + ); + --mod-tabs-selection-indicator-color: var( + --mod-tabs-selection-indicator-color-emphasized, + var(--spectrum-tabs-selection-indicator-color) + ); +} + ::slotted([selected]:not([slot])) { color: var( --highcontrast-tabs-color-selected, @@ -243,6 +134,13 @@ governing permissions and limitations under the License. ); } +:host([direction^='vertical']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); +} + :host([direction^='vertical']) #list, :host([direction^='vertical-right']) #list { flex-direction: column; @@ -295,10 +193,52 @@ governing permissions and limitations under the License. inset-inline-start: 0; } +:host([direction^='vertical-right']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical-right, + left + ); +} + :host([direction^='vertical-right']) #list #selection-indicator { inset-inline: auto 0; } +:host([direction^='vertical']) #list:dir(rtl), +:host([dir='rtl'][direction^='vertical']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + left + ); +} + +:host([direction^='vertical-right']) #list:dir(rtl), +:host([dir='rtl'][direction^='vertical-right']) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); +} + +:host([compact]) #list { + --spectrum-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-medium) + ); + --spectrum-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --spectrum-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --spectrum-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) + ); +} + @media (forced-colors: active) { #list { --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); @@ -348,7 +288,3 @@ governing permissions and limitations under the License. ); } } - -#list { - --spectrum-tabs-font-weight: var(--system-spectrum-tabs-font-weight); -} diff --git a/packages/tabs/src/tabs-overrides.css b/packages/tabs/src/tabs-overrides.css new file mode 100644 index 0000000000..455c65120b --- /dev/null +++ b/packages/tabs/src/tabs-overrides.css @@ -0,0 +1,76 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +#list { + --spectrum-tabs-font-weight: var(--system-tabs-font-weight); + --spectrum-tabs-item-height: var(--system-tabs-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); + --spectrum-tabs-color: var(--system-tabs-color); + --spectrum-tabs-color-selected: var(--system-tabs-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-color-hover); + --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); + --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); + --spectrum-tabs-font-family: var(--system-tabs-font-family); + --spectrum-tabs-font-style: var(--system-tabs-font-style); + --spectrum-tabs-font-size: var(--system-tabs-font-size); + --spectrum-tabs-line-height: var(--system-tabs-line-height); + --spectrum-tabs-focus-indicator-width: var( + --system-tabs-focus-indicator-width + ); + --spectrum-tabs-focus-indicator-border-radius: var( + --system-tabs-focus-indicator-border-radius + ); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); + --spectrum-tabs-focus-indicator-color: var( + --system-tabs-focus-indicator-color + ); + --spectrum-tabs-selection-indicator-color: var( + --system-tabs-selection-indicator-color + ); + --spectrum-tabs-list-background-direction: var( + --system-tabs-list-background-direction + ); + --spectrum-tabs-divider-background-color: var( + --system-tabs-divider-background-color + ); + --spectrum-tabs-divider-size: var(--system-tabs-divider-size); + --spectrum-tabs-divider-border-radius: var( + --system-tabs-divider-border-radius + ); + --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); + --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); +} + +:host([emphasized]) #list { + --spectrum-tabs-color-selected: var( + --system-tabs-emphasized-color-selected + ); + --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); + --spectrum-tabs-color-key-focus: var( + --system-tabs-emphasized-color-key-focus + ); + --spectrum-tabs-selection-indicator-color: var( + --system-tabs-emphasized-selection-indicator-color + ); +} diff --git a/packages/tabs/src/tabs-sizes-overrides.css b/packages/tabs/src/tabs-sizes-overrides.css new file mode 100644 index 0000000000..695c157fe6 --- /dev/null +++ b/packages/tabs/src/tabs-sizes-overrides.css @@ -0,0 +1,72 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([size='s']) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-s-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-s-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-s-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); +} + +:host([size='l']) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-l-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-l-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-l-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); +} + +:host([size='xl']) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-xl-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-xl-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-xl-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); +} diff --git a/packages/tabs/src/tabs-sizes.css b/packages/tabs/src/tabs-sizes.css index 9406912b1c..689d949575 100644 --- a/packages/tabs/src/tabs-sizes.css +++ b/packages/tabs/src/tabs-sizes.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-tabs-sizes.css'); +@import url('./tabs-sizes-overrides.css'); diff --git a/packages/tabs/src/tabs.css b/packages/tabs/src/tabs.css index 62e48caa47..e500cded04 100644 --- a/packages/tabs/src/tabs.css +++ b/packages/tabs/src/tabs.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-tabs.css'); +@import url('./tabs-overrides.css'); :host { display: grid; diff --git a/packages/tags/package.json b/packages/tags/package.json index 050e12e1de..10c2c3beff 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -37,7 +37,9 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/tag-overrides.css.js": "./src/tag-overrides.css.js", "./src/tag.css.js": "./src/tag.css.js", + "./src/tags-overrides.css.js": "./src/tags-overrides.css.js", "./src/tags.css.js": "./src/tags.css.js", "./sp-tags.js": { "development": "./sp-tags.dev.js", @@ -72,8 +74,8 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/tag": "^9.1.0", - "@spectrum-css/taggroup": "^5.1.0" + "@spectrum-css/tag": "^10.0.0-s2-foundations.14", + "@spectrum-css/taggroup": "^6.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 170bda45a4..403695cb53 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -11,256 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-avatar-opacity-disabled: 0.3; - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); - --spectrum-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-tag-label-line-height: var(--spectrum-line-height-100); - --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - --spectrum-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --spectrum-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --spectrum-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); - --spectrum-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --spectrum-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --spectrum-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --spectrum-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --spectrum-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --spectrum-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --spectrum-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --spectrum-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --spectrum-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --spectrum-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --spectrum-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --spectrum-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --spectrum-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); - --spectrum-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --spectrum-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --spectrum-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --spectrum-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --spectrum-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --spectrum-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --spectrum-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --spectrum-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --spectrum-tag-content-color-emphasized: var(--spectrum-white); - --spectrum-tag-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --spectrum-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --spectrum-tag-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); -} - -:host([size='s']) { - --spectrum-tag-height: var(--spectrum-component-height-75); - --spectrum-tag-font-size: var(--spectrum-font-size-75); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --spectrum-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --spectrum-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --spectrum-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tag-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --spectrum-tag-size-small-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --spectrum-tag-size-small-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --spectrum-tag-size-small-clear-button-spacing-inline-end - ); -} - -:host { - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --spectrum-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --spectrum-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --spectrum-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --spectrum-tag-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --spectrum-tag-size-medium-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --spectrum-tag-size-medium-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --spectrum-tag-size-medium-clear-button-spacing-inline-end - ); -} - -:host([size='l']) { - --spectrum-tag-height: var(--spectrum-component-height-200); - --spectrum-tag-font-size: var(--spectrum-font-size-200); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --spectrum-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --spectrum-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - --spectrum-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --spectrum-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --spectrum-tag-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --spectrum-tag-size-large-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --spectrum-tag-size-large-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --spectrum-tag-size-large-clear-button-spacing-inline-end - ); -} - :host { border-color: var( --highcontrast-tag-border-color, @@ -327,6 +77,7 @@ governing permissions and limitations under the License. ::slotted([slot='icon']) { block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + flex-shrink: 0; margin-block-start: calc( var( --mod-tag-icon-spacing-block-start, @@ -365,11 +116,11 @@ governing permissions and limitations under the License. } .clear-button { - box-sizing: border-box; - color: currentColor; --mod-clear-button-width: fit-content; --spectrum-clearbutton-fill-size: fit-content; --spectrum-clearbutton-fill-background-color: transparent; + box-sizing: border-box; + color: currentColor; margin-inline-start: calc( var( --mod-tag-clear-button-spacing-inline-start, @@ -927,7 +678,6 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { - forced-color-adjust: none; --highcontrast-tag-border-color: ButtonText; --highcontrast-tag-border-color-hover: ButtonText; --highcontrast-tag-border-color-active: ButtonText; @@ -941,6 +691,7 @@ governing permissions and limitations under the License. --highcontrast-tag-content-color-active: ButtonText; --highcontrast-tag-content-color-focus: ButtonText; --highcontrast-tag-focus-ring-color: Highlight; + forced-color-adjust: none; } :host([selected]) { @@ -996,92 +747,3 @@ governing permissions and limitations under the License. --highcontrast-tag-content-color-emphasized: CanvasText; } } - -:host { - --spectrum-tag-border-color: var(--system-spectrum-tag-border-color); - --spectrum-tag-border-color-hover: var( - --system-spectrum-tag-border-color-hover - ); - --spectrum-tag-border-color-active: var( - --system-spectrum-tag-border-color-active - ); - --spectrum-tag-border-color-focus: var( - --system-spectrum-tag-border-color-focus - ); - --spectrum-tag-size-small-corner-radius: var( - --system-spectrum-tag-size-small-corner-radius - ); - --spectrum-tag-size-medium-corner-radius: var( - --system-spectrum-tag-size-medium-corner-radius - ); - --spectrum-tag-size-large-corner-radius: var( - --system-spectrum-tag-size-large-corner-radius - ); - --spectrum-tag-background-color: var( - --system-spectrum-tag-background-color - ); - --spectrum-tag-background-color-hover: var( - --system-spectrum-tag-background-color-hover - ); - --spectrum-tag-background-color-active: var( - --system-spectrum-tag-background-color-active - ); - --spectrum-tag-background-color-focus: var( - --system-spectrum-tag-background-color-focus - ); - --spectrum-tag-content-color: var(--system-spectrum-tag-content-color); - --spectrum-tag-content-color-hover: var( - --system-spectrum-tag-content-color-hover - ); - --spectrum-tag-content-color-active: var( - --system-spectrum-tag-content-color-active - ); - --spectrum-tag-content-color-focus: var( - --system-spectrum-tag-content-color-focus - ); - --spectrum-tag-border-color-selected: var( - --system-spectrum-tag-border-color-selected - ); - --spectrum-tag-border-color-selected-hover: var( - --system-spectrum-tag-border-color-selected-hover - ); - --spectrum-tag-border-color-selected-active: var( - --system-spectrum-tag-border-color-selected-active - ); - --spectrum-tag-border-color-selected-focus: var( - --system-spectrum-tag-border-color-selected-focus - ); - --spectrum-tag-border-color-disabled: var( - --system-spectrum-tag-border-color-disabled - ); - --spectrum-tag-background-color-disabled: var( - --system-spectrum-tag-background-color-disabled - ); - --spectrum-tag-size-small-spacing-inline-start: var( - --system-spectrum-tag-size-small-spacing-inline-start - ); - --spectrum-tag-size-small-label-spacing-inline-end: var( - --system-spectrum-tag-size-small-label-spacing-inline-end - ); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --system-spectrum-tag-size-small-clear-button-spacing-inline-end - ); - --spectrum-tag-size-medium-spacing-inline-start: var( - --system-spectrum-tag-size-medium-spacing-inline-start - ); - --spectrum-tag-size-medium-label-spacing-inline-end: var( - --system-spectrum-tag-size-medium-label-spacing-inline-end - ); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --system-spectrum-tag-size-medium-clear-button-spacing-inline-end - ); - --spectrum-tag-size-large-spacing-inline-start: var( - --system-spectrum-tag-size-large-spacing-inline-start - ); - --spectrum-tag-size-large-label-spacing-inline-end: var( - --system-spectrum-tag-size-large-label-spacing-inline-end - ); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --system-spectrum-tag-size-large-clear-button-spacing-inline-end - ); -} diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css index 0df4a93691..1af81362f9 100644 --- a/packages/tags/src/spectrum-tags.css +++ b/packages/tags/src/spectrum-tags.css @@ -12,8 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); - --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); flex-wrap: wrap; margin: 0; padding: 0; diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css new file mode 100644 index 0000000000..820cd373b0 --- /dev/null +++ b/packages/tags/src/tag-overrides.css @@ -0,0 +1,391 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-tag-border-color: var(--system-tag-border-color); + --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); + --spectrum-tag-border-color-active: var(--system-tag-border-color-active); + --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); + --spectrum-tag-size-small-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --spectrum-tag-size-medium-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --spectrum-tag-size-large-corner-radius: var( + --system-tag-size-large-corner-radius + ); + --spectrum-tag-background-color: var(--system-tag-background-color); + --spectrum-tag-background-color-hover: var( + --system-tag-background-color-hover + ); + --spectrum-tag-background-color-active: var( + --system-tag-background-color-active + ); + --spectrum-tag-background-color-focus: var( + --system-tag-background-color-focus + ); + --spectrum-tag-content-color: var(--system-tag-content-color); + --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); + --spectrum-tag-content-color-active: var(--system-tag-content-color-active); + --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); + --spectrum-tag-border-color-selected: var( + --system-tag-border-color-selected + ); + --spectrum-tag-border-color-selected-hover: var( + --system-tag-border-color-selected-hover + ); + --spectrum-tag-border-color-selected-active: var( + --system-tag-border-color-selected-active + ); + --spectrum-tag-border-color-selected-focus: var( + --system-tag-border-color-selected-focus + ); + --spectrum-tag-border-color-disabled: var( + --system-tag-border-color-disabled + ); + --spectrum-tag-background-color-disabled: var( + --system-tag-background-color-disabled + ); + --spectrum-tag-size-small-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --spectrum-tag-size-small-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --spectrum-tag-size-medium-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --spectrum-tag-size-medium-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --spectrum-tag-size-large-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --spectrum-tag-size-large-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); + --spectrum-avatar-opacity-disabled: var( + --system-tag-avatar-opacity-disabled + ); + --spectrum-tag-animation-duration: var(--system-tag-animation-duration); + --spectrum-tag-border-width: var(--system-tag-border-width); + --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); + --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); + --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); + --spectrum-tag-label-line-height: var(--system-tag-label-line-height); + --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); + --spectrum-tag-content-color-selected: var( + --system-tag-content-color-selected + ); + --spectrum-tag-background-color-selected: var( + --system-tag-background-color-selected + ); + --spectrum-tag-background-color-selected-hover: var( + --system-tag-background-color-selected-hover + ); + --spectrum-tag-background-color-selected-active: var( + --system-tag-background-color-selected-active + ); + --spectrum-tag-background-color-selected-focus: var( + --system-tag-background-color-selected-focus + ); + --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); + --spectrum-tag-border-color-invalid-hover: var( + --system-tag-border-color-invalid-hover + ); + --spectrum-tag-border-color-invalid-active: var( + --system-tag-border-color-invalid-active + ); + --spectrum-tag-border-color-invalid-focus: var( + --system-tag-border-color-invalid-focus + ); + --spectrum-tag-content-color-invalid: var( + --system-tag-content-color-invalid + ); + --spectrum-tag-content-color-invalid-hover: var( + --system-tag-content-color-invalid-hover + ); + --spectrum-tag-content-color-invalid-active: var( + --system-tag-content-color-invalid-active + ); + --spectrum-tag-content-color-invalid-focus: var( + --system-tag-content-color-invalid-focus + ); + --spectrum-tag-border-color-invalid-selected: var( + --system-tag-border-color-invalid-selected + ); + --spectrum-tag-border-color-invalid-selected-hover: var( + --system-tag-border-color-invalid-selected-hover + ); + --spectrum-tag-border-color-invalid-selected-focus: var( + --system-tag-border-color-invalid-selected-focus + ); + --spectrum-tag-border-color-invalid-selected-active: var( + --system-tag-border-color-invalid-selected-active + ); + --spectrum-tag-background-color-invalid-selected: var( + --system-tag-background-color-invalid-selected + ); + --spectrum-tag-background-color-invalid-selected-hover: var( + --system-tag-background-color-invalid-selected-hover + ); + --spectrum-tag-background-color-invalid-selected-active: var( + --system-tag-background-color-invalid-selected-active + ); + --spectrum-tag-background-color-invalid-selected-focus: var( + --system-tag-background-color-invalid-selected-focus + ); + --spectrum-tag-content-color-invalid-selected: var( + --system-tag-content-color-invalid-selected + ); + --spectrum-tag-border-color-emphasized: var( + --system-tag-border-color-emphasized + ); + --spectrum-tag-border-color-emphasized-hover: var( + --system-tag-border-color-emphasized-hover + ); + --spectrum-tag-border-color-emphasized-active: var( + --system-tag-border-color-emphasized-active + ); + --spectrum-tag-border-color-emphasized-focus: var( + --system-tag-border-color-emphasized-focus + ); + --spectrum-tag-background-color-emphasized: var( + --system-tag-background-color-emphasized + ); + --spectrum-tag-background-color-emphasized-hover: var( + --system-tag-background-color-emphasized-hover + ); + --spectrum-tag-background-color-emphasized-active: var( + --system-tag-background-color-emphasized-active + ); + --spectrum-tag-background-color-emphasized-focus: var( + --system-tag-background-color-emphasized-focus + ); + --spectrum-tag-content-color-emphasized: var( + --system-tag-content-color-emphasized + ); + --spectrum-tag-content-color-disabled: var( + --system-tag-content-color-disabled + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-icon-spacing-inline-end + ); + --spectrum-tag-icon-size: var(--system-tag-icon-size); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-icon-spacing-block-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-clear-button-spacing-inline-start + ); + --spectrum-tag-height: var(--system-tag-height); + --spectrum-tag-font-size: var(--system-tag-font-size); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-clear-button-spacing-block + ); +} + +:host([size='s']) { + --spectrum-tag-height: var(--system-tag-size-s-height); + --spectrum-tag-font-size: var(--system-tag-size-s-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-s-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-s-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-s-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-s-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-s-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-s-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-s-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-s-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-s-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-s-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-s-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-s-clear-button-spacing-inline-end + ); +} + +:scope { + --spectrum-tag-height: var(--system-scope-tag-height); + --spectrum-tag-font-size: var(--system-scope-tag-font-size); + --spectrum-tag-icon-size: var(--system-scope-tag-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-scope-tag-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-scope-tag-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-scope-tag-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-scope-tag-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-scope-tag-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-scope-tag-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-scope-tag-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-scope-tag-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-scope-tag-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-scope-tag-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-scope-tag-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-scope-tag-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-scope-tag-clear-button-spacing-inline-end + ); +} + +:host { + --spectrum-tag-height: var(--system-tag-size-m-height); + --spectrum-tag-font-size: var(--system-tag-size-m-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-m-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-m-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-m-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-m-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-m-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-m-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-m-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-m-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-m-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-m-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-m-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-m-clear-button-spacing-inline-end + ); +} + +:host([size='l']) { + --spectrum-tag-height: var(--system-tag-size-l-height); + --spectrum-tag-font-size: var(--system-tag-size-l-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-l-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-l-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-l-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-l-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-l-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-l-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-l-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-l-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-l-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-l-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-l-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-l-clear-button-spacing-inline-end + ); +} diff --git a/packages/tags/src/tag.css b/packages/tags/src/tag.css index cb20fc8b65..540747a619 100644 --- a/packages/tags/src/tag.css +++ b/packages/tags/src/tag.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-tag.css'); +@import url('./tag-overrides.css'); :host([invalid]) .clear-button { --spectrum-clearbutton-medium-icon-color: var( diff --git a/packages/tags/src/tags-overrides.css b/packages/tags/src/tags-overrides.css new file mode 100644 index 0000000000..7b87e2f6fa --- /dev/null +++ b/packages/tags/src/tags-overrides.css @@ -0,0 +1,21 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-tag-group-item-margin-block: var( + --system-tag-group-item-margin-block + ); + --spectrum-tag-group-item-margin-inline: var( + --system-tag-group-item-margin-inline + ); +} diff --git a/packages/tags/src/tags.css b/packages/tags/src/tags.css index c2bbcd71f7..eb9ce88f6e 100644 --- a/packages/tags/src/tags.css +++ b/packages/tags/src/tags.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-tags.css'); +@import url('./tags-overrides.css'); :host { --mod-clear-button-width: fit-content; diff --git a/packages/textfield/package.json b/packages/textfield/package.json index b993220541..2207d34f9a 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/textfield-overrides.css.js": "./src/textfield-overrides.css.js", "./src/textfield.css.js": "./src/textfield.css.js", "./sp-textfield.js": { "development": "./sp-textfield.dev.js", @@ -65,7 +66,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/textfield": "^7.1.0" + "@spectrum-css/textfield": "^8.0.0-s2-foundations.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts index 44476c9fa3..467e121d49 100644 --- a/packages/textfield/src/Textfield.ts +++ b/packages/textfield/src/Textfield.ts @@ -35,6 +35,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js'; import textfieldStyles from './textfield.css.js'; import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js'; +import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js'; const textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const; export type TextfieldType = (typeof textfieldTypes)[number]; @@ -49,7 +50,7 @@ export class TextfieldBase extends ManageHelpText( }) ) { public static override get styles(): CSSResultArray { - return [textfieldStyles, checkmarkStyles]; + return [textfieldStyles, checkmarkStyles, checkmarkSmallOverrides]; } @state() diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 4983f215a3..88a6b3d23c 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -11,390 +11,10 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - --spectrum-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-textfield-width: 240px; - --spectrum-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --spectrum-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --spectrum-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --spectrum-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --spectrum-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --spectrum-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --spectrum-textfield-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-textfield-character-count-font-size: var( - --spectrum-font-size-75 - ); - --spectrum-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --spectrum-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --spectrum-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-textfield-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-textfield-background-color: var(--spectrum-gray-50); - --spectrum-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --spectrum-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --spectrum-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --spectrum-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --spectrum-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --spectrum-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --spectrum-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --spectrum-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --spectrum-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --spectrum-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --spectrum-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --spectrum-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --spectrum-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --spectrum-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --spectrum-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --spectrum-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --spectrum-textfield-icon-color-valid: var( - --spectrum-positive-visual-color - ); - --spectrum-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --spectrum-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --spectrum-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); -} - -:host([size='s']) { - --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --spectrum-textfield-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --spectrum-textfield-character-count-font-size: var( - --spectrum-font-size-75 - ); - --spectrum-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --spectrum-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); -} - -:host { - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --spectrum-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --spectrum-textfield-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --spectrum-textfield-character-count-font-size: var( - --spectrum-font-size-75 - ); - --spectrum-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --spectrum-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); -} - -:host([size='l']) { - --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --spectrum-textfield-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --spectrum-textfield-character-count-font-size: var( - --spectrum-font-size-100 - ); - --spectrum-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --spectrum-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); -} - -:host([size='xl']) { - --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --spectrum-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --spectrum-textfield-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --spectrum-textfield-character-count-font-size: var( - --spectrum-font-size-200 - ); - --spectrum-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --spectrum-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); -} - #textfield { - inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); - text-indent: 0; - appearance: textfield; + --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); text-overflow: ellipsis; + inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); grid-template-rows: auto auto auto; grid-template-columns: auto auto; margin: 0; @@ -405,6 +25,7 @@ governing permissions and limitations under the License. :host([quiet]) #textfield:after { content: ''; + pointer-events: none; inline-size: 100%; block-size: var( --mod-textfield-focus-indicator-width, @@ -658,24 +279,23 @@ governing permissions and limitations under the License. var(--spectrum-textfield-border-width) ) ); - text-indent: 0; vertical-align: top; background-color: var( --mod-textfield-background-color, var(--spectrum-textfield-background-color) ); - border: var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - solid + border-color: var( + --highcontrast-textfield-border-color, var( - --highcontrast-textfield-border-color, - var( - --mod-textfield-border-color, - var(--spectrum-textfield-border-color) - ) - ); + --mod-textfield-border-color, + var(--spectrum-textfield-border-color) + ) + ); + border-style: solid; + border-width: var( + --mod-textfield-border-width, + var(--spectrum-textfield-border-width) + ); border-radius: var( --mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius) @@ -706,20 +326,19 @@ governing permissions and limitations under the License. ) ); text-overflow: ellipsis; - appearance: textfield; + appearance: none; outline: none; grid-area: 2 / 1 / auto / span 2; margin: 0; } -.input::-ms-clear { - inline-size: 0; - block-size: 0; +:host([type='number']) .input { + -moz-appearance: textfield; } -.input::-webkit-inner-spin-button, -.input::-webkit-outer-spin-button { - appearance: none; +:host([type='number']) .input::-webkit-inner-spin-button, +:host([type='number']) .input::-webkit-outer-spin-button { + -webkit-appearance: none; margin: 0; } @@ -762,12 +381,6 @@ governing permissions and limitations under the License. font-style: normal; } -.input:lang(ja)::-moz-placeholder, -.input:lang(ko)::-moz-placeholder, -.input:lang(zh)::-moz-placeholder { - font-style: normal; -} - :host([focused]) .input, .input:focus { border-color: var( @@ -777,16 +390,11 @@ governing permissions and limitations under the License. var(--spectrum-textfield-border-color-focus) ) ); - color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) - ); } +:host([focused]) .input, :host([focused]) .input::placeholder, +.input:focus, .input:focus::placeholder { color: var( --highcontrast-textfield-text-color-focus, @@ -805,13 +413,6 @@ governing permissions and limitations under the License. var(--spectrum-textfield-border-color-keyboard-focus) ) ); - color: var( - --highcontrast-textfield-text-color-keyboard-focus, - var( - --mod-textfield-text-color-keyboard-focus, - var(--spectrum-textfield-text-color-keyboard-focus) - ) - ); outline: var( --mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width) @@ -830,6 +431,7 @@ governing permissions and limitations under the License. ); } +:host([focused]) .input, :host([focused]) .input::placeholder { color: var( --highcontrast-textfield-text-color-keyboard-focus, @@ -932,26 +534,14 @@ governing permissions and limitations under the License. --mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled) ); - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - -webkit-text-fill-color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); resize: none; opacity: 1; border-color: #0000; } +.input:disabled, .input:disabled::placeholder, +:host([disabled]) #textfield .input, :host([disabled]) #textfield .input::placeholder { color: var( --highcontrast-textfield-text-color-disabled, @@ -991,16 +581,11 @@ governing permissions and limitations under the License. --mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled) ); - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); } +:host([quiet][disabled]) .input, :host([quiet][disabled]) .input::placeholder, +.input:disabled, .input:disabled::placeholder { color: var( --highcontrast-textfield-text-color-disabled, @@ -1047,16 +632,11 @@ governing permissions and limitations under the License. var(--spectrum-textfield-border-color-hover) ) ); - color: var( - --highcontrast-textfield-text-color-hover, - var( - --mod-textfield-text-color-hover, - var(--spectrum-textfield-text-color-hover) - ) - ); } + .input:hover, .input:hover::placeholder, + #textfield:hover .input, #textfield:hover .input::placeholder { color: var( --highcontrast-textfield-text-color-hover, @@ -1091,8 +671,8 @@ governing permissions and limitations under the License. ); } - :host([invalid]) .input:hover, - :host([invalid]:hover) .input { + :host([invalid]) .input:hover:not(.is-disabled), + :host([invalid]:hover):not(.is-disabled) .input { border-color: var( --highcontrast-textfield-border-color-invalid-hover, var( @@ -1119,25 +699,13 @@ governing permissions and limitations under the License. --mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled) ); - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - -webkit-text-fill-color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); resize: none; opacity: 1; border-color: #0000; } + :host([quiet][disabled]:hover) .input, + :host([disabled]) #textfield:hover .input, :host([disabled]) #textfield:hover .input::placeholder { color: var( --highcontrast-textfield-text-color-disabled, @@ -1154,13 +722,6 @@ governing permissions and limitations under the License. --mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled) ); - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); } :host([quiet][disabled]:hover) .input::placeholder { @@ -1174,19 +735,13 @@ governing permissions and limitations under the License. } :host([readonly]) #textfield:hover .input { - background-color: initial; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); border-color: #0000; outline: none; } + :host([readonly]) #textfield:hover .input, :host([readonly]) #textfield:hover .input::placeholder { + background-color: initial; color: var( --highcontrast-textfield-text-color-readonly, var( @@ -1194,7 +749,6 @@ governing permissions and limitations under the License. var(--spectrum-textfield-text-color-readonly) ) ); - background-color: initial; } } @@ -1300,24 +854,3 @@ governing permissions and limitations under the License. --highcontrast-textfield-text-color-readonly: CanvasText; } } - -:host { - --spectrum-textfield-border-color: var( - --system-spectrum-textfield-border-color - ); - --spectrum-textfield-border-color-hover: var( - --system-spectrum-textfield-border-color-hover - ); - --spectrum-textfield-border-color-focus: var( - --system-spectrum-textfield-border-color-focus - ); - --spectrum-textfield-border-color-focus-hover: var( - --system-spectrum-textfield-border-color-focus-hover - ); - --spectrum-textfield-border-color-keyboard-focus: var( - --system-spectrum-textfield-border-color-keyboard-focus - ); - --spectrum-textfield-border-width: var( - --system-spectrum-textfield-border-width - ); -} diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css new file mode 100644 index 0000000000..3084404b78 --- /dev/null +++ b/packages/textfield/src/textfield-overrides.css @@ -0,0 +1,415 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-textfield-border-color: var(--system-textfield-border-color); + --spectrum-textfield-border-color-hover: var( + --system-textfield-border-color-hover + ); + --spectrum-textfield-border-color-focus: var( + --system-textfield-border-color-focus + ); + --spectrum-textfield-border-color-focus-hover: var( + --system-textfield-border-color-focus-hover + ); + --spectrum-textfield-border-color-keyboard-focus: var( + --system-textfield-border-color-keyboard-focus + ); + --spectrum-textfield-border-width: var(--system-textfield-border-width); + --spectrum-texfield-animation-duration: var( + --system-textfield-texfield-animation-duration + ); + --spectrum-textfield-width: var(--system-textfield-width); + --spectrum-textfield-min-width: var(--system-textfield-min-width); + --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); + --spectrum-textfield-spacing-inline-quiet: var( + --system-textfield-spacing-inline-quiet + ); + --spectrum-textfield-spacing-block-start: var( + --system-textfield-spacing-block-start + ); + --spectrum-textfield-spacing-block-end: var( + --system-textfield-spacing-block-end + ); + --spectrum-textfield-spacing-block-quiet: var( + --system-textfield-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-block: var( + --system-textfield-label-spacing-block + ); + --spectrum-textfield-helptext-spacing-block: var( + --system-textfield-helptext-spacing-block + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( + --system-textfield-icon-spacing-inline-end-quiet-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( + --system-textfield-icon-spacing-inline-end-quiet-valid + ); + --spectrum-textfield-font-family: var(--system-textfield-font-family); + --spectrum-textfield-font-weight: var(--system-textfield-font-weight); + --spectrum-textfield-character-count-font-family: var( + --system-textfield-character-count-font-family + ); + --spectrum-textfield-character-count-font-weight: var( + --system-textfield-character-count-font-weight + ); + --spectrum-textfield-character-count-spacing-inline: var( + --system-textfield-character-count-spacing-inline + ); + --spectrum-textfield-character-count-spacing-inline-side: var( + --system-textfield-character-count-spacing-inline-side + ); + --spectrum-textfield-focus-indicator-width: var( + --system-textfield-focus-indicator-width + ); + --spectrum-textfield-focus-indicator-gap: var( + --system-textfield-focus-indicator-gap + ); + --spectrum-textfield-background-color: var( + --system-textfield-background-color + ); + --spectrum-textfield-text-color-default: var( + --system-textfield-text-color-default + ); + --spectrum-textfield-text-color-hover: var( + --system-textfield-text-color-hover + ); + --spectrum-textfield-text-color-focus: var( + --system-textfield-text-color-focus + ); + --spectrum-textfield-text-color-focus-hover: var( + --system-textfield-text-color-focus-hover + ); + --spectrum-textfield-text-color-keyboard-focus: var( + --system-textfield-text-color-keyboard-focus + ); + --spectrum-textfield-text-color-readonly: var( + --system-textfield-text-color-readonly + ); + --spectrum-textfield-background-color-disabled: var( + --system-textfield-background-color-disabled + ); + --spectrum-textfield-border-color-disabled: var( + --system-textfield-border-color-disabled + ); + --spectrum-textfield-text-color-disabled: var( + --system-textfield-text-color-disabled + ); + --spectrum-textfield-border-color-invalid-default: var( + --system-textfield-border-color-invalid-default + ); + --spectrum-textfield-border-color-invalid-hover: var( + --system-textfield-border-color-invalid-hover + ); + --spectrum-textfield-border-color-invalid-focus: var( + --system-textfield-border-color-invalid-focus + ); + --spectrum-textfield-border-color-invalid-focus-hover: var( + --system-textfield-border-color-invalid-focus-hover + ); + --spectrum-textfield-border-color-invalid-keyboard-focus: var( + --system-textfield-border-color-invalid-keyboard-focus + ); + --spectrum-textfield-icon-color-invalid: var( + --system-textfield-icon-color-invalid + ); + --spectrum-textfield-text-color-invalid: var( + --system-textfield-text-color-invalid + ); + --spectrum-textfield-text-color-valid: var( + --system-textfield-text-color-valid + ); + --spectrum-textfield-icon-color-valid: var( + --system-textfield-icon-color-valid + ); + --spectrum-textfield-focus-indicator-color: var( + --system-textfield-focus-indicator-color + ); + --spectrum-text-area-min-inline-size: var( + --system-textfield-text-area-min-inline-size + ); + --spectrum-text-area-min-block-size: var( + --system-textfield-text-area-min-block-size + ); + --spectrum-textfield-height: var(--system-textfield-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-text-area-min-block-size-quiet + ); +} + +:host([size='s']) #textfield { + --spectrum-textfield-height: var(--system-textfield-size-s-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-s-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-s-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-s-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-s-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-s-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-s-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-s-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-s-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-s-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-s-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-s-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-s-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-s-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-s-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-s-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-s-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-s-text-area-min-block-size-quiet + ); +} + +:host #textfield { + --spectrum-textfield-height: var(--system-textfield-size-m-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-m-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-m-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-m-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-m-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-m-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-m-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-m-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-m-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-m-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-m-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-m-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-m-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-m-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-m-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-m-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-m-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-m-text-area-min-block-size-quiet + ); +} + +:host([size='l']) #textfield { + --spectrum-textfield-height: var(--system-textfield-size-l-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-l-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-l-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-l-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-l-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-l-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-l-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-l-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-l-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-l-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-l-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-l-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-l-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-l-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-l-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-l-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-l-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-l-text-area-min-block-size-quiet + ); +} + +:host([size='xl']) #textfield { + --spectrum-textfield-height: var(--system-textfield-size-xl-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-xl-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-xl-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-xl-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-xl-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-xl-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-xl-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-xl-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-xl-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-xl-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-xl-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-xl-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-xl-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-xl-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-xl-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-xl-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-xl-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-xl-text-area-min-block-size-quiet + ); +} diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css index 475a7e1b05..7047c5ff0a 100644 --- a/packages/textfield/src/textfield.css +++ b/packages/textfield/src/textfield.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-textfield.css'); +@import url('./textfield-overrides.css'); :host { display: inline-flex; diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index 2a029186b9..e5e914efc3 100644 --- a/packages/thumbnail/package.json +++ b/packages/thumbnail/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/thumbnail-overrides.css.js": "./src/thumbnail-overrides.css.js", "./src/thumbnail.css.js": "./src/thumbnail.css.js", "./sp-thumbnail.js": { "development": "./sp-thumbnail.dev.js", @@ -61,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^0.47.2" }, "devDependencies": { - "@spectrum-css/thumbnail": "^6.1.0" + "@spectrum-css/thumbnail": "^7.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index edc8502b62..eb61b15621 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -11,97 +11,9 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - --spectrum-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-color-opacity) - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --spectrum-thumbnail-border-width-selected: var( - --spectrum-border-width-200 - ); - --spectrum-thumbnail-border-color-selected: var( - --spectrum-accent-color-800 - ); - --spectrum-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-thumbnail-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); -} - -:host([size='50']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); -} - -:host([size='75']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); -} - -:host([size='100']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); -} - -:host([size='200']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); -} - -:host([size='300']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); -} - -:host([size='400']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); -} - -:host([size='500']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); -} - -:host([size='600']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); -} - -:host([size='700']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); -} - -:host([size='800']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); -} - -:host([size='900']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); -} - -:host([size='1000']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); -} - :host { inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); vertical-align: top; z-index: 0; margin: 0; @@ -111,15 +23,19 @@ governing permissions and limitations under the License. overflow: hidden; } +:host, :host:before { - content: ''; - z-index: 2; - inline-size: 100%; - block-size: 100%; border-radius: var( --mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius) ); +} + +:host:before { + content: ''; + z-index: 2; + inline-size: 100%; + block-size: 100%; box-shadow: inset 0 0 0 var( --mod-thumbnail-border-width, @@ -322,8 +238,8 @@ governing permissions and limitations under the License. } ::slotted(*) { - max-block-size: 100%; max-inline-size: 100%; + max-block-size: 100%; z-index: 1; position: relative; } @@ -352,11 +268,11 @@ governing permissions and limitations under the License. @media (forced-colors: active) { :host { - forced-color-adjust: none; --highcontrast-thumbnail-border-color-selected: Highlight; --highcontrast-thumbnail-focus-indicator-color: Highlight; --highcontrast-thumbnail-border-color: CanvasText; --highcontrast-thumbnail-layer-border-color-inner: Canvas; --highcontrast-thumbnail-layer-border-color-outer: CanvasText; + forced-color-adjust: none; } } diff --git a/packages/thumbnail/src/thumbnail-overrides.css b/packages/thumbnail/src/thumbnail-overrides.css new file mode 100644 index 0000000000..0ba20daf97 --- /dev/null +++ b/packages/thumbnail/src/thumbnail-overrides.css @@ -0,0 +1,99 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-thumbnail-size: var(--system-thumbnail-size); + --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius); + --spectrum-thumbnail-border-width: var(--system-thumbnail-border-width); + --spectrum-thumbnail-border-color-rgba: var( + --system-thumbnail-border-color-rgba + ); + --spectrum-thumbnail-layer-border-width-inner: var( + --system-thumbnail-layer-border-width-inner + ); + --spectrum-thumbnail-layer-border-color-inner: var( + --system-thumbnail-layer-border-color-inner + ); + --spectrum-thumbnail-layer-border-width-outer: var( + --system-thumbnail-layer-border-width-outer + ); + --spectrum-thumbnail-layer-border-color-outer: var( + --system-thumbnail-layer-border-color-outer + ); + --spectrum-thumbnail-border-width-selected: var( + --system-thumbnail-border-width-selected + ); + --spectrum-thumbnail-border-color-selected: var( + --system-thumbnail-border-color-selected + ); + --spectrum-thumbnail-focus-indicator-thickness: var( + --system-thumbnail-focus-indicator-thickness + ); + --spectrum-thumbnail-focus-indicator-gap: var( + --system-thumbnail-focus-indicator-gap + ); + --spectrum-thumbnail-focus-indicator-color: var( + --system-thumbnail-focus-indicator-color + ); + --spectrum-thumbnail-color-opacity-disabled: var( + --system-thumbnail-color-opacity-disabled + ); +} + +:host([size='50']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-50-size); +} + +:host([size='75']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-75-size); +} + +:host([size='100']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-100-size); +} + +:host([size='200']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-200-size); +} + +:host([size='300']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-300-size); +} + +:host([size='400']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-400-size); +} + +:host([size='500']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-500-size); +} + +:host([size='600']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-600-size); +} + +:host([size='700']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-700-size); +} + +:host([size='800']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-800-size); +} + +:host([size='900']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-900-size); +} + +:host([size='1000']) { + --spectrum-thumbnail-size: var(--system-thumbnail-size-1000-size); +} diff --git a/packages/thumbnail/src/thumbnail.css b/packages/thumbnail/src/thumbnail.css index d8722162b4..414dc1559f 100644 --- a/packages/thumbnail/src/thumbnail.css +++ b/packages/thumbnail/src/thumbnail.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-thumbnail.css'); +@import url('./thumbnail-overrides.css'); ::slotted(:not(img)) { display: none; diff --git a/packages/toast/package.json b/packages/toast/package.json index 0ccbde26a3..742cfe6954 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/toast-overrides.css.js": "./src/toast-overrides.css.js", "./src/toast.css.js": "./src/toast.css.js", "./sp-toast.js": { "development": "./sp-toast.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/toast": "^10.1.0" + "@spectrum-css/toast": "^11.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index 332886b03b..06a2738fbe 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -11,54 +11,6 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); - --spectrum-toast-font-size: var(--spectrum-font-size-100); - --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-toast-block-size: var(--spectrum-toast-height); - --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --spectrum-toast-border-width: var(--spectrum-border-width-100); - --spectrum-toast-line-height: var(--spectrum-line-height-100); - --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --spectrum-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-bottom-edge-to-divider: var( - --spectrum-spacing-100 - ); - --spectrum-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --spectrum-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); - --spectrum-toast-spacing-top-edge-to-text: var( - --spectrum-toast-top-to-text - ); - --spectrum-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --spectrum-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --spectrum-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --spectrum-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --spectrum-toast-text-and-icon-color: var(--spectrum-white); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); -} - @media (forced-colors: active) { :host { --highcontrast-toast-border-color: ButtonText; @@ -104,6 +56,7 @@ governing permissions and limitations under the License. var(--spectrum-toast-background-color-default) ) ); + overflow-wrap: anywhere; flex-direction: row; align-items: stretch; padding-inline-start: var( @@ -312,9 +265,3 @@ governing permissions and limitations under the License. var(--spectrum-toast-spacing-close-button) ); } - -:host { - --spectrum-toast-background-color-default: var( - --system-spectrum-toast-background-color-default - ); -} diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css new file mode 100644 index 0000000000..bfc90e3680 --- /dev/null +++ b/packages/toast/src/toast-overrides.css @@ -0,0 +1,73 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-toast-background-color-default: var( + --system-toast-background-color-default + ); + --spectrum-toast-font-weight: var(--system-toast-font-weight); + --spectrum-toast-font-size: var(--system-toast-font-size); + --spectrum-toast-corner-radius: var(--system-toast-corner-radius); + --spectrum-toast-block-size: var(--system-toast-block-size); + --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); + --spectrum-toast-border-width: var(--system-toast-border-width); + --spectrum-toast-line-height: var(--system-toast-line-height); + --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); + --spectrum-toast-spacing-icon-to-text: var( + --system-toast-spacing-icon-to-text + ); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var( + --system-toast-spacing-start-edge-to-text-and-icon + ); + --spectrum-toast-spacing-text-and-action-button-to-divider: var( + --system-toast-spacing-text-and-action-button-to-divider + ); + --spectrum-toast-spacing-top-edge-to-divider: var( + --system-toast-spacing-top-edge-to-divider + ); + --spectrum-toast-spacing-bottom-edge-to-divider: var( + --system-toast-spacing-bottom-edge-to-divider + ); + --spectrum-toast-spacing-top-edge-to-icon: var( + --system-toast-spacing-top-edge-to-icon + ); + --spectrum-toast-spacing-text-to-action-button-horizontal: var( + --system-toast-spacing-text-to-action-button-horizontal + ); + --spectrum-toast-spacing-close-button: var( + --system-toast-spacing-close-button + ); + --spectrum-toast-spacing-block-start: var( + --system-toast-spacing-block-start + ); + --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); + --spectrum-toast-spacing-top-edge-to-text: var( + --system-toast-spacing-top-edge-to-text + ); + --spectrum-toast-spacing-bottom-edge-to-text: var( + --system-toast-spacing-bottom-edge-to-text + ); + --spectrum-toast-negative-background-color-default: var( + --system-toast-negative-background-color-default + ); + --spectrum-toast-positive-background-color-default: var( + --system-toast-positive-background-color-default + ); + --spectrum-toast-informative-background-color-default: var( + --system-toast-informative-background-color-default + ); + --spectrum-toast-text-and-icon-color: var( + --system-toast-text-and-icon-color + ); + --spectrum-toast-divider-color: var(--system-toast-divider-color); +} diff --git a/packages/toast/src/toast.css b/packages/toast/src/toast.css index 45b7e925a3..ce940b9cee 100644 --- a/packages/toast/src/toast.css +++ b/packages/toast/src/toast.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-toast.css'); +@import url('./toast-overrides.css'); :host { --spectrum-overlay-animation-distance: var(--spectrum-spacing-100); @@ -20,7 +21,8 @@ governing permissions and limitations under the License. opacity: 0; pointer-events: none; - transition: transform var(--spectrum-overlay-animation-duration) ease-in-out, + transition: + transform var(--spectrum-overlay-animation-duration) ease-in-out, opacity var(--spectrum-overlay-animation-duration) ease-in-out, visibility 0s linear var(--spectrum-overlay-animation-duration); visibility: hidden; diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 265b4765b0..43046c7c1e 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -37,6 +37,7 @@ "development": "./src/tooltip-directive.dev.js", "default": "./src/tooltip-directive.js" }, + "./src/tooltip-overrides.css.js": "./src/tooltip-overrides.css.js", "./src/tooltip.css.js": "./src/tooltip.css.js", "./sp-tooltip.js": { "development": "./sp-tooltip.dev.js", @@ -67,7 +68,7 @@ "@spectrum-web-components/shared": "^0.47.2" }, "devDependencies": { - "@spectrum-css/tooltip": "^6.1.1" + "@spectrum-css/tooltip": "^7.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 12e1130342..5f133656b3 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -15,6 +15,10 @@ governing permissions and limitations under the License. pointer-events: none; visibility: hidden; opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; transition: transform var( @@ -39,78 +43,24 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; + transition-delay: 0s; transition-delay: var( --mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s) ); } -#tooltip { - --spectrum-tooltip-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-tooltip-margin: 0px; - --spectrum-tooltip-height: var(--spectrum-component-height-75); - --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); - --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tooltip-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --spectrum-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --spectrum-tooltip-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --spectrum-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --spectrum-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --spectrum-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --spectrum-tooltip-content-color: var(--spectrum-white); - --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - --spectrum-tooltip-tip-height-percentage: 50%; - --spectrum-tooltip-tip-antialiasing-inset: 0.5px; - --spectrum-tooltip-pointer-corner-spacing: var( - --spectrum-corner-radius-100 - ); - --spectrum-tooltip-background-color-default: var( - --spectrum-tooltip-backgound-color-default-neutral - ); -} - @media (forced-colors: active) { #tooltip { border: 1px solid #0000; } #tip { - forced-color-adjust: none; --highcontrast-tooltip-background-color-default: CanvasText; --highcontrast-tooltip-background-color-informative: CanvasText; --highcontrast-tooltip-background-color-positive: CanvasText; --highcontrast-tooltip-background-color-negative: CanvasText; + forced-color-adjust: none; } } @@ -807,9 +757,3 @@ governing permissions and limitations under the License. ) ); } - -#tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var( - --system-spectrum-tooltip-backgound-color-default-neutral - ); -} diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css new file mode 100644 index 0000000000..2b78b654c7 --- /dev/null +++ b/packages/tooltip/src/tooltip-overrides.css @@ -0,0 +1,72 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +#tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var( + --system-tooltip-backgound-color-default-neutral + ); + --spectrum-tooltip-animation-duration: var( + --system-tooltip-animation-duration + ); + --spectrum-tooltip-margin: var(--system-tooltip-margin); + --spectrum-tooltip-height: var(--system-tooltip-height); + --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); + --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); + --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); + --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); + --spectrum-tooltip-font-size: var(--system-tooltip-font-size); + --spectrum-tooltip-line-height: var(--system-tooltip-line-height); + --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); + --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); + --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); + --spectrum-tooltip-spacing-block-start: var( + --system-tooltip-spacing-block-start + ); + --spectrum-tooltip-spacing-block-end: var( + --system-tooltip-spacing-block-end + ); + --spectrum-tooltip-icon-spacing-inline-start: var( + --system-tooltip-icon-spacing-inline-start + ); + --spectrum-tooltip-icon-spacing-inline-end: var( + --system-tooltip-icon-spacing-inline-end + ); + --spectrum-tooltip-icon-spacing-block-start: var( + --system-tooltip-icon-spacing-block-start + ); + --spectrum-tooltip-background-color-informative: var( + --system-tooltip-background-color-informative + ); + --spectrum-tooltip-background-color-positive: var( + --system-tooltip-background-color-positive + ); + --spectrum-tooltip-background-color-negative: var( + --system-tooltip-background-color-negative + ); + --spectrum-tooltip-content-color: var(--system-tooltip-content-color); + --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); + --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); + --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); + --spectrum-tooltip-tip-height-percentage: var( + --system-tooltip-tip-height-percentage + ); + --spectrum-tooltip-tip-antialiasing-inset: var( + --system-tooltip-tip-antialiasing-inset + ); + --spectrum-tooltip-pointer-corner-spacing: var( + --system-tooltip-pointer-corner-spacing + ); + --spectrum-tooltip-background-color-default: var( + --system-tooltip-background-color-default + ); +} diff --git a/packages/tooltip/src/tooltip.css b/packages/tooltip/src/tooltip.css index d7bba1802d..7cf8464a16 100644 --- a/packages/tooltip/src/tooltip.css +++ b/packages/tooltip/src/tooltip.css @@ -11,6 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-tooltip.css'); +@import url('./tooltip-overrides.css'); :host { display: contents; diff --git a/packages/tray/package.json b/packages/tray/package.json index f9ba17ef67..7d7f7a2324 100644 --- a/packages/tray/package.json +++ b/packages/tray/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/tray-overrides.css.js": "./src/tray-overrides.css.js", "./src/tray.css.js": "./src/tray.css.js", "./sp-tray.js": { "development": "./sp-tray.dev.js", @@ -64,7 +65,7 @@ "@spectrum-web-components/underlay": "^0.47.2" }, "devDependencies": { - "@spectrum-css/tray": "^3.1.0" + "@spectrum-css/tray": "^4.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css index b08f93657c..b805794541 100644 --- a/packages/tray/src/spectrum-tray.css +++ b/packages/tray/src/spectrum-tray.css @@ -11,24 +11,9 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host { - --spectrum-tray-exit-animation-delay: 0s; - --spectrum-tray-entry-animation-delay: 0.16s; - --spectrum-tray-max-inline-size: 375px; - --spectrum-tray-spacing-edge-to-tray-safe-zone: 64px; - --spectrum-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --spectrum-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-tray-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tray-background-color: var(--spectrum-background-layer-2-color); -} - .tray { - inline-size: 100%; --mod-modal-max-width: 100%; + inline-size: 100%; max-inline-size: 100%; max-block-size: calc( 100vh - @@ -38,6 +23,7 @@ governing permissions and limitations under the License. ) ); box-sizing: border-box; + border-radius: 0; border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; transition: diff --git a/packages/tray/src/tray-overrides.css b/packages/tray/src/tray-overrides.css new file mode 100644 index 0000000000..e4675d827c --- /dev/null +++ b/packages/tray/src/tray-overrides.css @@ -0,0 +1,33 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-tray-exit-animation-delay: var( + --system-tray-exit-animation-delay + ); + --spectrum-tray-entry-animation-delay: var( + --system-tray-entry-animation-delay + ); + --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); + --spectrum-tray-spacing-edge-to-tray-safe-zone: var( + --system-tray-spacing-edge-to-safe-zone + ); + --spectrum-tray-entry-animation-duration: var( + --system-tray-entry-animation-duration + ); + --spectrum-tray-exit-animation-duration: var( + --system-tray-exit-animation-duration + ); + --spectrum-tray-corner-radius: var(--system-tray-corner-radius); + --spectrum-tray-background-color: var(--system-tray-background-color); +} diff --git a/packages/tray/src/tray.css b/packages/tray/src/tray.css index 45c493bba1..0c2ac0d46b 100644 --- a/packages/tray/src/tray.css +++ b/packages/tray/src/tray.css @@ -12,6 +12,7 @@ governing permissions and limitations under the License. @import url('./spectrum-tray-wrapper.css'); @import url('./spectrum-tray.css'); +@import url('./tray-overrides.css'); :host { align-items: flex-end; diff --git a/packages/underlay/package.json b/packages/underlay/package.json index c424db47ab..e39e8a8e27 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -33,6 +33,7 @@ "development": "./src/index.dev.js", "default": "./src/index.js" }, + "./src/underlay-overrides.css.js": "./src/underlay-overrides.css.js", "./src/underlay.css.js": "./src/underlay.css.js", "./sp-underlay.js": { "development": "./sp-underlay.dev.js", @@ -60,7 +61,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/underlay": "^4.1.0" + "@spectrum-css/underlay": "^5.0.0-s2-foundations.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index 8b2cd13e7e..e2732e8653 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -15,6 +15,10 @@ governing permissions and limitations under the License. pointer-events: none; visibility: hidden; opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; transition: transform var( @@ -39,6 +43,7 @@ governing permissions and limitations under the License. pointer-events: auto; visibility: visible; opacity: 1; + transition-delay: 0s; transition-delay: var( --mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s) @@ -46,31 +51,6 @@ governing permissions and limitations under the License. } :host { - --spectrum-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --spectrum-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --spectrum-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --spectrum-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --spectrum-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --spectrum-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --spectrum-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --spectrum-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); background-color: var( --mod-underlay-background-color, var(--spectrum-underlay-background-color) diff --git a/packages/underlay/src/underlay-overrides.css b/packages/underlay/src/underlay-overrides.css new file mode 100644 index 0000000000..12ae6f7f93 --- /dev/null +++ b/packages/underlay/src/underlay-overrides.css @@ -0,0 +1,36 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-underlay-background-entry-animation-delay: var( + --system-underlay-background-entry-animation-delay + ); + --spectrum-underlay-background-exit-animation-ease: var( + --system-underlay-background-exit-animation-ease + ); + --spectrum-underlay-background-entry-animation-ease: var( + --system-underlay-background-entry-animation-ease + ); + --spectrum-underlay-background-entry-animation-duration: var( + --system-underlay-background-entry-animation-duration + ); + --spectrum-underlay-background-exit-animation-duration: var( + --system-underlay-background-exit-animation-duration + ); + --spectrum-underlay-background-exit-animation-delay: var( + --system-underlay-background-exit-animation-delay + ); + --spectrum-underlay-background-color: var( + --system-underlay-background-color + ); +} diff --git a/packages/underlay/src/underlay.css b/packages/underlay/src/underlay.css index a40da31593..7f5d69a770 100644 --- a/packages/underlay/src/underlay.css +++ b/packages/underlay/src/underlay.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-underlay.css'); +@import url('./underlay-overrides.css'); diff --git a/projects/documentation/scripts/build-ts.js b/projects/documentation/scripts/build-ts.js index 0a2dc4839c..12e4fff5f5 100644 --- a/projects/documentation/scripts/build-ts.js +++ b/projects/documentation/scripts/build-ts.js @@ -45,6 +45,7 @@ async function main() { filename: filePath, code: css, minify: true, + errorRecovery: true, resolver: { read(readPath) { const file = fs.readFileSync(readPath, 'utf8'); diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 9edcff1340..8287a3ca31 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -121,7 +121,7 @@ export class StoryDecorator extends SpectrumElement { var(--spectrum-component-height-100) ); box-sizing: border-box; - background-color: var(--spectrum-gray-100); + background-color: var(--spectrum-background-base-color); color: var(--spectrum-body-color); --decorator-padding-100: calc( @@ -149,7 +149,6 @@ export class StoryDecorator extends SpectrumElement { align-items: flex-start; justify-content: flex-end; box-sizing: border-box; - background-color: var(--spectrum-gray-100); padding-bottom: calc( 2 * var(--spectrum-alias-focus-ring-size) ); @@ -247,6 +246,13 @@ export class StoryDecorator extends SpectrumElement { } } + public get backgroundStyle() { + if (system === 'spectrum-two') { + return `background-color: var(--spectrum-background-base-color);`; + } + return `background-color: var(--spectrum-gray-100);`; + } + protected handleKeydown(event: KeyboardEvent): void { const path = event.composedPath(); const hasInput = path.some( @@ -267,7 +273,7 @@ export class StoryDecorator extends SpectrumElement { color=${this.color} scale=${this.scale} dir=${this.direction} - lang=${this.lang} + style=${this.backgroundStyle} part="container" @keydown=${this.handleKeydown} > diff --git a/scripts/generate-tokens-wrapper.js b/scripts/generate-tokens-wrapper.js index b98bd76ba1..1bb23a916a 100644 --- a/scripts/generate-tokens-wrapper.js +++ b/scripts/generate-tokens-wrapper.js @@ -38,50 +38,71 @@ const tokenPackages = [ 'actiongroup', 'alertbanner', 'alertdialog', + 'asset', 'avatar', 'badge', + 'banner', 'button', 'buttongroup', + 'breadcrumb', 'checkbox', + 'card', + 'clearbutton', 'closebutton', + 'coachindicator', + 'coachmark', 'colorarea', + 'colorfield', 'colorhandle', 'colorloupe', + 'colorslider', 'colorwheel', 'combobox', + 'contextualhelp', + 'dialog', 'divider', 'dropzone', 'fieldgroup', 'fieldlabel', 'helptext', 'illustratedmessage', + 'icon', 'infieldbutton', 'link', 'menu', + 'meter', + 'modal', + 'numberfield', 'picker', 'pickerbutton', 'popover', 'progressbar', 'progresscircle', + 'quickactions', 'radio', 'search', 'sidenav', 'slider', + 'splitbutton', 'splitview', 'statuslight', 'stepper', 'swatch', 'swatchgroup', + 'opacitycheckerboard', 'switch', 'table', 'tabs', 'tag', + 'taggroup', 'textfield', 'thumbnail', 'toast', 'tooltip', + 'topnav', 'tray', 'underlay', + 'typography', ]; const packagePaths = tokenPackages.map((packageName) => { @@ -97,7 +118,7 @@ const packagePaths = tokenPackages.map((packageName) => { }); const spectrumThemeSelectorRegExp = - /(?:\.spectrum(--(?:express|light(?:est)?|dark(?:est)?|medium|large)?,?(\n|\s)*)?)+\s?\{/g; + /(?:\.spectrum(--(?:express|light(?:est)?|dark(?:est)?|medium|large|legacy)?,?(\n|\s)*)?)+\s?\{/g; const importantCommentRegExp = /\/\*![^*]*\*+([^\/*][^*]*\*+)*\//g; const targetHost = (css) => { @@ -117,7 +138,7 @@ const targetHost = (css) => { return css.replaceAll(spectrumThemeSelectorRegExp, ':host,\n:root {'); }; -const removeImporantComments = (css) => { +const removeImportantComments = (css) => { /** * Spectrum CSS uses /*! comments that are "not" removable. * These comments pile up in merged files, so we _need_ to remove them. @@ -125,98 +146,78 @@ const removeImporantComments = (css) => { 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 + */ const processTokens = (srcPath, tokensDir) => { let css = fs.readFileSync(srcPath, 'utf8'); const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); - css = removeImporantComments(targetHost(css)); - - // s2 doesn't need express tokens - if (tokensDir === 'tokens-v2' && fileName.startsWith('express')) { - return; - } - - fs.writeFileSync( - path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName), - css - ); -}; -const processPackages = async (srcPath, tokensDir, index) => { - const packageName = tokenPackages[index]; - const spectrumPath = path.join(srcPath, 'spectrum.css'); + css = removeImportantComments(targetHost(css)); - // check if spectrumPath exists - if (fs.existsSync(spectrumPath)) { - let spectrum = fs.readFileSync(spectrumPath, 'utf8'); - spectrum = removeImporantComments(targetHost(spectrum)); - fs.appendFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - tokensDir, - 'spectrum', - 'global-vars.css' - ), - spectrum + try { + fs.writeFileSync( + path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName), + css ); - } - - // spectrum-2 doesn't need express package tokens - if (tokensDir === 'tokens-v2') { - return; - } - - const expressPath = path.join(srcPath, 'express.css'); - - // check if expressPath exists - if (fs.existsSync(expressPath)) { - let express = fs.readFileSync(expressPath, 'utf8'); - express = removeImporantComments(targetHost(express)); - fs.appendFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - tokensDir, - 'express', - 'global-vars.css' - ), - express - ); - } + } catch (er) {} +}; +const processPackages = async (tokensDir, index) => { + const packagename = tokenPackages[index]; - const varsPaths = path.join( + let componentLevelTokensPath = path.join( __dirname, '..', - 'tools', - 'styles', - '**', - '*.css' + 'node_modules', + '@spectrum-css', + tokensDir, + 'dist', + 'css', + 'components' ); - const varsRegExp = new RegExp(`\\s*--spectrum-${packageName}[^;}]*;*`, 'g'); - const aliasRegExp = new RegExp( - `\\s*--spectrum-alias-${packageName}[^;}]*;*`, - 'g' + + 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 varsWithoutTokens = await fg([varsPaths], { - ignore: ['**/tokens/**/*.css'], - }); - for (const varsPath of varsWithoutTokens) { - let css = fs.readFileSync(varsPath, 'utf8'); - css = css.replaceAll(varsRegExp, ''); - css = css.replaceAll(aliasRegExp, ''); - fs.writeFileSync(varsPath, css); - } }; /** * Core entry function */ export async function generateTokensWrapper(spectrumVersion) { - const tokensDir = spectrumVersion === 'spectrum' ? 'tokens' : 'tokens-v2'; + const isSpectrumOne = Boolean(spectrumVersion === 'spectrum'); + const tokensDir = isSpectrumOne ? 'tokens' : 'tokens-v2'; + fs.mkdirSync( path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'), { @@ -249,9 +250,12 @@ export async function generateTokensWrapper(spectrumVersion) { for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) { processTokens(tokensPath, tokensDir); } - - const processes = packagePaths.map((path, index) => { - return processPackages(path, tokensDir, index); - }); - await Promise.all(processes); + if (isSpectrumOne) { + return; + } + return Promise.all( + packagePaths.map((_, index) => { + return processPackages(tokensDir, index); + }) + ); } diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 6fe2ff2c3d..0d1e133221 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -53,7 +53,7 @@ const processCSSData = async ( from, usedVariables = undefined ) => { - /* lit-html is a JS litteral, so `\` escapes by default. + /* lit-html is a JS literal, so `\` escapes by default. * for there to be unicode characters, the escape must * escape itself... */ @@ -114,8 +114,29 @@ const processCSS = async ( fs.writeFileSync(dstPath, result, 'utf8'); }; +const processTypography = async ( + baseSrcPath, + overridesSrcPath, + dstPath, + identifier, + from, + usedVariables = undefined +) => { + const baseData = fs.readFileSync(baseSrcPath, 'utf8'); + const overridesData = fs.readFileSync(overridesSrcPath, 'utf8'); + const data = baseData + overridesData; + const result = await processCSSData(data, identifier, from, usedVariables); + fs.writeFileSync(dstPath, result, 'utf8'); + + const fontPath = path.resolve( + path.join(__dirname, '..', 'tools', 'styles', 'fonts.css') + ); + fs.writeFileSync(fontPath, result, 'utf8'); +}; + // where is spectrum-css? // TODO: use resolve package to find node_modules +// TODO: we need to revisit whether we need these const spectrumPaths = [ path.resolve( path.join( @@ -212,12 +233,20 @@ async function processSpectrumVars() { 'typography', 'dist' ); - const srcPath = path.join(typographyPath, 'index-vars.css'); + const baseSrcPath = path.join(typographyPath, 'index-base.css'); + const overridesSrcPath = path.join(typographyPath, 'index-theme.css'); const dstPath = path.resolve( path.join(__dirname, '..', 'tools', 'styles', 'typography.css') ); console.log(`processing typography`); - processes.push(processCSS(srcPath, dstPath, 'typography')); + processes.push( + processTypography( + baseSrcPath, + overridesSrcPath, + dstPath, + 'typography' + ) + ); } await Promise.all(processes).then(() => { diff --git a/tasks/css-tools.js b/tasks/css-tools.js index 8ff321a309..65aa40e0be 100644 --- a/tasks/css-tools.js +++ b/tasks/css-tools.js @@ -44,6 +44,7 @@ export const processCSS = async (cssPath) => { let { code, map } = await bundleAsync({ filename: cssPath, minify: true, + errorRecovery: true, resolver: { read(filePath) { const file = fs.readFileSync(filePath, 'utf8'); diff --git a/tasks/process-spectrum.js b/tasks/process-spectrum.js index 2da84a5fdd..e3276c6479 100644 --- a/tasks/process-spectrum.js +++ b/tasks/process-spectrum.js @@ -168,8 +168,11 @@ async function processComponent(componentPath) { * @type { import('./spectrum-css-converter').SpectrumCSSConverter} */ for await (const conversion of conversions) { - const sourcePath = require.resolve(conversion.inPackage); - const sourceCSS = fs.readFileSync(sourcePath, 'utf-8'); + const sourcePath = require + .resolve(conversion.inPackage) + .replace('index.css', 'index-base.css'); + var sourceCSS = fs.readFileSync(sourcePath, 'utf-8'); + const outputPath = path.join( ...(Array.isArray(conversion.outPackage) ? conversion.outPackage @@ -423,6 +426,233 @@ async function processComponent(componentPath) { const selectorMetadata = selectors.map(processSelectorV2); return buildSelectorsV2(selectorMetadata); }; + if (conversion.systemOverrides !== false) { + const bridgepath = require + .resolve(conversion.inPackage) + .replace('index.css', 'index-theme.css'); + + if (fs.existsSync(bridgepath)) { + let bridgeCss = fs.readFileSync(bridgepath, 'utf8'); + + const systemsPath = path.join( + ...(Array.isArray(conversion.outPackage) + ? conversion.outPackage + : ['packages', conversion.outPackage]), + 'src', + `${conversion.fileName}-overrides.css` + ); + + const { code } = transform({ + code: Buffer.from(bridgeCss), + visitor: { + // @ts-ignore + Rule(rule) { + if ( + !conversion.allowThemeRules && + isThemeOnlyRule(rule) + ) { + return nullRuleFromRule(rule); + } + if ( + rule.type === 'style' && + rule.value.selectors?.length + ) { + if ( + conversion.hoistCustomPropertiesFrom && + rule.value.selectors.length === 1 && + rule.value.selectors[0].length === 1 && + rule.value.selectors[0][0].type === + 'class' && + rule.value.selectors[0][0].name === + conversion.hoistCustomPropertiesFrom && + rule.value.declarations.declarations.every( + (declaration) => + declaration.property === 'custom' + ) + ) { + return { + ...rule, + value: { + ...rule.value, + selectors: [ + [ + { + type: 'pseudo-class', + kind: 'host', + }, + ], + ], + }, + }; + } + const currentSelectors = [ + ...rule.value.selectors, + ]; + const nextSelectors = []; + currentSelectors.forEach((selector) => { + let include = true; + conversion.excludeByWholeSelector?.forEach( + (exclusion) => { + include = + include && + !( + exclusion.length === + selector.length && + exclusion.every( + ( + component, + exclusionIndex + ) => + compareSelectors( + component, + selector[ + exclusionIndex + ] + ) + ) + ); + } + ); + conversion.excludeByComponents?.forEach( + (exclusion) => { + if (exclusion.regex) { + include = + include && + !selector.find( + (component) => { + return ( + component.type === + 'class' && + component.type === + exclusion.type && + component.name.search( + /** @type {RegExp} */ ( + exclusion.regex + ) + ) > -1 + ); + } + ); + } else { + include = + include && + !selector.find( + (component) => + compareSelectors( + exclusion, + component + ) + ); + } + } + ); + conversion.requireComponentPresence?.forEach( + (required) => { + if (required.regex) { + include = + include && + !!selector.find( + (component) => { + return ( + component.type === + 'class' && + component.type === + required.type && + component.name.search( + /** @type {RegExp} */ ( + required.regex + ) + ) > -1 + ); + } + ); + } else { + include = + include && + !!selector.find( + (component) => + compareSelectors( + required, + component + ) + ); + } + } + ); + if (!include) { + conversion.includeByWholeSelector?.forEach( + (inclusion) => { + const sameLength = + inclusion.length === + selector.length; + if (!sameLength) { + return; + } + const selectorSameAsComponent = + inclusion.every( + ( + component, + inclusionIndex + ) => + compareSelectors( + selector[ + inclusionIndex + ], + component + ) + ); + include = + include || + (sameLength && + selectorSameAsComponent); + } + ); + } + if (include) { + nextSelectors.push(selector); + } + }); + if (!nextSelectors.length) { + return nullRuleFromRule(rule); + } + const selectors = + processSelectors(nextSelectors); + return { + ...rule, + value: { + ...rule.value, + selectors, + }, + }; + } + }, + }, + filename: systemsPath, + }); + + // if the code is an empty buffer then don't write the file + if (code.length != 1) { + fs.writeFileSync( + systemsPath, + `/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + + /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + ${code} + `.replace(/\/\*\![\w|\W]*\*\//, '') + ); + } + } + } const { code } = transform({ code: Buffer.from(sourceCSS), @@ -585,6 +815,7 @@ async function processComponent(componentPath) { } }, }, + filename: outputPath, }); fs.writeFileSync( diff --git a/tasks/spectrum-css-converter.d.ts b/tasks/spectrum-css-converter.d.ts index 3f459cdb9e..b4edf4385b 100644 --- a/tasks/spectrum-css-converter.d.ts +++ b/tasks/spectrum-css-converter.d.ts @@ -93,6 +93,10 @@ type Conversion = { * Exclude Selectors that do not feature the Selector Components included herein */ requireComponentPresence?: SelectorComponentWithRegex[]; + /** + * Create a system-overrides.css file that acts as a bridge between different themes + */ + systemOverrides?: boolean; }; export type SpectrumCSSConverter = { diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 70524d5fb3..7bcf0fdc83 100644 --- a/tools/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -22,7 +22,9 @@ "exports": { ".": "./src/opacity-checkerboard.css.js", "./package.json": "./package.json", + "./src/is-opacity-checkerboard-overrides.css.js": "./src/is-opacity-checkerboard-overrides.css.js", "./src/is-opacity-checkerboard.css.js": "./src/is-opacity-checkerboard.css.js", + "./src/opacity-checkerboard-overrides.css.js": "./src/opacity-checkerboard-overrides.css.js", "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js" }, "scripts": { @@ -46,7 +48,7 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/opacitycheckerboard": "^2.1.0" + "@spectrum-css/opacitycheckerboard": "^3.0.0-s2-foundations.13" }, "types": "./src/opacity-checkerboard.d.ts", "sideEffects": [ diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css new file mode 100644 index 0000000000..1d8e8c61f3 --- /dev/null +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css @@ -0,0 +1,27 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host { + --spectrum-opacity-checkerboard-dark: var( + --system-opacity-checkerboard-dark + ); + --spectrum-opacity-checkerboard-light: var( + --system-opacity-checkerboard-light + ); + --spectrum-opacity-checkerboard-size: var( + --system-opacity-checkerboard-size + ); + --spectrum-opacity-checkerboard-position: var( + --system-opacity-checkerboard-position + ); +} diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css index 278f215eec..067419fb8a 100644 --- a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-is-opacity-checkerboard.css'); +@import url('./is-opacity-checkerboard-overrides.css'); diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css new file mode 100644 index 0000000000..2c75c4afd3 --- /dev/null +++ b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css @@ -0,0 +1,27 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.opacity-checkerboard { + --spectrum-opacity-checkerboard-dark: var( + --system-opacity-checkerboard-dark + ); + --spectrum-opacity-checkerboard-light: var( + --system-opacity-checkerboard-light + ); + --spectrum-opacity-checkerboard-size: var( + --system-opacity-checkerboard-size + ); + --spectrum-opacity-checkerboard-position: var( + --system-opacity-checkerboard-position + ); +} diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard.css b/tools/opacity-checkerboard/src/opacity-checkerboard.css index 6d7d151300..e174aa1d0c 100644 --- a/tools/opacity-checkerboard/src/opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/opacity-checkerboard.css @@ -11,3 +11,4 @@ governing permissions and limitations under the License. */ @import url('./spectrum-opacity-checkerboard.css'); +@import url('./opacity-checkerboard-overrides.css'); diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css index 8387798100..844adb9d69 100644 --- a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css @@ -12,16 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-opacity-checkerboard-position: left top; background: repeating-conic-gradient( var( --mod-opacity-checkerboard-light, diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css index 6e53e30d36..0f55fda1b4 100644 --- a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -12,16 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .opacity-checkerboard { - --spectrum-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-opacity-checkerboard-position: left top; background: repeating-conic-gradient( var( --mod-opacity-checkerboard-light, diff --git a/tools/styles/body.ts b/tools/styles/body.ts index 9cde836775..880e25f543 100644 --- a/tools/styles/body.ts +++ b/tools/styles/body.ts @@ -12,6 +12,14 @@ governing permissions and limitations under the License. import baseStyles from './src/spectrum-base.css.js'; import langStyles from './src/spectrum-lang.css.js'; +import langOverrides from './src/lang-overrides.css.js'; import bodyStyles from './src/spectrum-body.css.js'; +import bodyOverrides from './src/body-overrides.css.js'; -export default [baseStyles, langStyles, bodyStyles]; +export default [ + baseStyles, + langStyles, + langOverrides, + bodyStyles, + bodyOverrides, +]; diff --git a/tools/styles/code.ts b/tools/styles/code.ts index 31e88b8f65..c758ab1de6 100644 --- a/tools/styles/code.ts +++ b/tools/styles/code.ts @@ -12,6 +12,14 @@ governing permissions and limitations under the License. import baseStyles from './src/spectrum-base.css.js'; import langStyles from './src/spectrum-lang.css.js'; +import langOverrides from './src/lang-overrides.css.js'; import codeStyles from './src/spectrum-code.css.js'; +import codeOverrides from './src/code-overrides.css.js'; -export default [baseStyles, langStyles, codeStyles]; +export default [ + baseStyles, + langStyles, + langOverrides, + codeStyles, + codeOverrides, +]; diff --git a/tools/styles/detail.ts b/tools/styles/detail.ts index 00951c5eab..45e71b3aee 100644 --- a/tools/styles/detail.ts +++ b/tools/styles/detail.ts @@ -12,6 +12,14 @@ governing permissions and limitations under the License. import baseStyles from './src/spectrum-base.css.js'; import langStyles from './src/spectrum-lang.css.js'; +import langOverrides from './src/lang-overrides.css.js'; import detailStyles from './src/spectrum-detail.css.js'; +import detailOverrides from './src/detail-overrides.css.js'; -export default [baseStyles, langStyles, detailStyles]; +export default [ + baseStyles, + langStyles, + langOverrides, + detailStyles, + detailOverrides, +]; diff --git a/tools/styles/exports.json b/tools/styles/exports.json index 14e36becea..0de880ce69 100755 --- a/tools/styles/exports.json +++ b/tools/styles/exports.json @@ -33,10 +33,15 @@ "./tokens-v2/*": "./tokens-v2/*", "./src/spectrum-base.css": "./src/spectrum-base.css", "./src/spectrum-body.css": "./src/spectrum-body.css", + "./src/body-overrides.css": "./src/body-overrides.css", "./src/spectrum-code.css": "./src/spectrum-code.css", + "./src/code-overrides.css": "./src/code-overrides.css", "./src/spectrum-detail.css": "./src/spectrum-code.css", + "./src/detail-overrides.css": "./src/detail-overrides.css", "./src/spectrum-heading.css": "./src/spectrum-heading.css", + "./src/heading-overrides.css": "./src/heading-overrides.css", "./src/spectrum-lang.css": "./src/spectrum-lang.css", + "./src/lang-overrides.css": "./src/lang-overrides.css", "./src/spectrum-typography.css": "./src/spectrum-typography.css", "./tokens/express/custom-large-vars.css": "./tokens/express/custom-large-vars.css", "./tokens/express/custom-medium-vars.css": "./tokens/express/custom-medium-vars.css", diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css index 25717a30e7..4156844d04 100644 --- a/tools/styles/express/spectrum-core-global.css +++ b/tools/styles/express/spectrum-core-global.css @@ -982,6 +982,9 @@ --spectrum-alias-font-family-condensed: var( --spectrum-global-font-font-family-condensed ); + --spectrum-alias-button-text-line-height: var( + --spectrum-global-font-line-height-small + ); --spectrum-alias-component-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -1549,6 +1552,119 @@ --spectrum-alias-control-three-width-s: var( --spectrum-global-dimension-size-300 ); + --spectrum-alias-infieldbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-infieldbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-l: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-xl: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-border-radius: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-border-radius-sided: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-border-size: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-infieldbutton-fill-padding-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-infieldbutton-fill-padding-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-fill-padding-l: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-infieldbutton-fill-padding-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-full-height-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-infieldbutton-full-height-m: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-full-height-l: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-infieldbutton-full-height-xl: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-infieldbutton-half-height-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-half-height-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-infieldbutton-half-height-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-infieldbutton-half-height-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-stepperbutton-gap: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-width-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-stepperbutton-width-m: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-stepperbutton-width-l: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-stepperbutton-width-xl: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-stepperbutton-icon-x-offset-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-x-offset-m: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-x-offset-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0; + --spectrum-alias-stepperbutton-radius-touching: var( + --spectrum-global-dimension-size-25 + ); --spectrum-alias-clearbutton-icon-margin-s: var( --spectrum-global-dimension-size-50 ); @@ -1564,6 +1680,55 @@ --spectrum-alias-clearbutton-border-radius: var( --spectrum-global-dimension-size-150 ); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-label-padding-y-s: 0; + --spectrum-alias-pickerbutton-label-padding-y-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-label-padding-y-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-pickerbutton-label-padding-y-xl: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-pickerbutton-border-radius-rounded: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-search-border-radius: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-combobox-quiet-button-offset-x: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-thumbnail-border-radius-small: var( + --spectrum-global-dimension-size-75 + ); --spectrum-alias-focus-ring-gap-small: var( --spectrum-global-dimension-static-size-25 ); @@ -1573,6 +1738,114 @@ --spectrum-alias-input-border-size: var( --spectrum-global-dimension-static-size-25 ); + --spectrum-alias-avatar-border-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-actiongroup-button-gap: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-actiongroup-button-gap-quiet: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-search-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-search-padding-left-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-search-padding-left-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-tag-border-radius: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-border-size-default: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-disabled: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-key-focus: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-padding-right-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-tag-padding-right-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-tag-padding-right-l: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-font-size-s: var( + --spectrum-global-dimension-font-size-50 + ); + --spectrum-alias-tag-font-size-m: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-tag-font-size-l: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-tag-text-padding-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-text-padding-top-l: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-margin-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-tag-icon-margin-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-icon-margin-top-l: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-clearbutton-width-s: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-tag-clearbutton-width-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-tag-clearbutton-width-l: var( + --spectrum-global-dimension-size-350 + ); + --spectrum-alias-tag-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-30 + ); + --spectrum-alias-tag-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-focusring-gap: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-colorloupe-width: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-colorloupe-height: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-search-border-radius-quiet: 0; --spectrum-alias-percent-50: 50%; --spectrum-alias-percent-70: 70%; --spectrum-alias-percent-100: 100%; @@ -1729,10 +2002,35 @@ --spectrum-alias-ui-icon-asterisk-size-100: var( --spectrum-global-dimension-size-100 ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-border-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-icon-margin-right-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-right-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-icon-margin-right-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-focusring-size: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-tag-focusring-gap-selected: var( + --spectrum-global-dimension-size-25 + ); } :root, :host { + --spectrum-alias-colorhandle-outer-border-color: #0000006b; --spectrum-alias-component-text-color-selected-default: var( --spectrum-global-color-gray-50 ); @@ -1862,6 +2160,120 @@ --spectrum-alias-toggle-border-color-key-focus: var( --spectrum-global-color-gray-900 ); + --spectrum-alias-tag-border-color-default: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-border-color-hover: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-border-color-down: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-border-color-key-focus: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-border-color-disabled-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-border-color-error-key-focus: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-focusring-border-color-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-background-color-disabled: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-tag-background-color-default: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-tag-background-color-hover: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-background-color-down: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-background-color-key-focus: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-background-color-error-default: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error-hover: var( + --spectrum-alias-tag-background-color-hover + ); + --spectrum-alias-tag-background-color-error-down: var( + --spectrum-alias-tag-background-color-down + ); + --spectrum-alias-tag-background-color-error-key-focus: var( + --spectrum-alias-tag-background-color-key-focus + ); + --spectrum-alias-avatar-border-color-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-avatar-border-color-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-avatar-border-color-selected-down: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-avatar-border-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-link-primary-text-color-default: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-link-primary-text-color-hover: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-link-primary-text-color-down: var( + --spectrum-global-color-indigo-700 + ); + --spectrum-alias-link-primary-text-color-key-focus: var( + --spectrum-alias-text-color-key-focus + ); + --spectrum-alias-link-secondary-text-color-default: var( + --spectrum-alias-text-color + ); + --spectrum-alias-link-secondary-text-color-hover: var( + --spectrum-alias-link-primary-text-color-hover + ); + --spectrum-alias-link-secondary-text-color-down: var( + --spectrum-alias-link-primary-text-color-down + ); + --spectrum-alias-link-secondary-text-color-key-focus: var( + --spectrum-alias-link-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-background-color-default: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-default: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-default: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-secondary-background-color-default: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-default: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-default: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-negative-background-color-default: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-default: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-default: var( + --spectrum-alias-button-negative-text-color-default + ); --spectrum-alias-input-border-color-default: var( --spectrum-alias-border-color ); @@ -1892,7 +2304,88 @@ --spectrum-alias-yellow-background-color-down: var( --spectrum-global-color-static-yellow-600 ); + --spectrum-alias-infieldbutton-background-color: transparent; + --spectrum-alias-infieldbutton-fill-border-color-default: transparent; + --spectrum-alias-infieldbutton-fill-border-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-border-color-down: transparent; + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent; + --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-thumbnail-lightsquare-background-color: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-tabs-divider-background-color-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tabs-divider-background-color-quiet: var( + --spectrum-alias-background-color-transparent + ); --spectrum-alias-tabitem-text-color-default: var( --spectrum-global-color-gray-700 ); @@ -2190,6 +2683,132 @@ --spectrum-alias-component-border-color-emphasized-selected: var( --spectrum-alias-component-border-color-emphasized-selected-default ); + --spectrum-alias-tag-border-color-error-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-error-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-selected: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-border-color: var( + --spectrum-alias-tag-border-color-default + ); + --spectrum-alias-tag-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-tag-border-color-error: var( + --spectrum-alias-tag-border-color-error-default + ); + --spectrum-alias-tag-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tag-text-color-hover: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-text-color: var( + --spectrum-alias-tag-text-color-default + ); + --spectrum-alias-tag-text-color-error-default: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-text-color-error-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-key-focus: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error: var( + --spectrum-alias-tag-text-color-error-default + ); + --spectrum-alias-tag-text-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-tag-icon-color: var( + --spectrum-alias-tag-icon-color-default + ); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error: var( + --spectrum-alias-tag-background-color-error-default + ); + --spectrum-alias-tag-background-color-error-selected-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-background-color-error-selected-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-background-color-error-selected: var( + --spectrum-alias-tag-background-color-error-selected-default + ); + --spectrum-alias-tag-background-color-selected-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tag-background-color-selected-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-tag-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-focusring-border-color: var( + --spectrum-alias-tag-focusring-border-color-default + ); + --spectrum-alias-avatar-border-color: var( + --spectrum-alias-avatar-border-color-default + ); + --spectrum-alias-avatar-border-color-selected: var( + --spectrum-alias-avatar-border-color-selected-default + ); --spectrum-alias-toggle-background-color: var( --spectrum-alias-toggle-background-color-default ); @@ -2205,6 +2824,159 @@ --spectrum-alias-toggle-icon-color-emphasized-selected: var( --spectrum-global-color-gray-75 ); + --spectrum-alias-button-primary-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-button-primary-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color: var( + --spectrum-alias-button-primary-background-color-default + ); + --spectrum-alias-button-primary-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-border-color-hover: var( + --spectrum-alias-button-primary-background-color-hover + ); + --spectrum-alias-button-primary-border-color-down: var( + --spectrum-alias-button-primary-background-color-down + ); + --spectrum-alias-button-primary-border-color-key-focus: var( + --spectrum-alias-button-primary-background-color-key-focus + ); + --spectrum-alias-button-primary-border-color: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-hover: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-down: var( + --spectrum-alias-button-primary-text-color-down + ); + --spectrum-alias-button-primary-icon-color-key-focus: var( + --spectrum-alias-button-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-icon-color: var( + --spectrum-alias-button-primary-icon-color-default + ); + --spectrum-alias-button-secondary-background-color-hover: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color-down: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-secondary-background-color-key-focus: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color: var( + --spectrum-alias-button-secondary-background-color-default + ); + --spectrum-alias-button-secondary-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-border-color-hover: var( + --spectrum-alias-button-secondary-background-color-hover + ); + --spectrum-alias-button-secondary-border-color-down: var( + --spectrum-alias-button-secondary-background-color-down + ); + --spectrum-alias-button-secondary-border-color-key-focus: var( + --spectrum-alias-button-secondary-background-color-key-focus + ); + --spectrum-alias-button-secondary-border-color: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-hover: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-down: var( + --spectrum-alias-button-secondary-text-color-down + ); + --spectrum-alias-button-secondary-icon-color-key-focus: var( + --spectrum-alias-button-secondary-text-color-key-focus + ); + --spectrum-alias-button-secondary-icon-color: var( + --spectrum-alias-button-secondary-icon-color-default + ); + --spectrum-alias-button-negative-background-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-background-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color: var( + --spectrum-alias-button-negative-background-color-default + ); + --spectrum-alias-button-negative-border-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-border-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-hover: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-down: var( + --spectrum-alias-button-negative-text-color-down + ); + --spectrum-alias-button-negative-icon-color-key-focus: var( + --spectrum-alias-button-negative-text-color-key-focus + ); + --spectrum-alias-button-negative-icon-color: var( + --spectrum-alias-button-negative-icon-color-default + ); --spectrum-alias-input-border-color-disabled: var( --spectrum-alias-border-color-transparent ); @@ -2244,6 +3016,11 @@ --spectrum-alias-background-color-yellow: var( --spectrum-alias-background-color-yellow-default ); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); --spectrum-alias-tabitem-text-color: var( --spectrum-alias-tabitem-text-color-default ); @@ -2302,6 +3079,12 @@ --spectrum-alias-text-color-overbackground-disabled: #fff3; --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color: var( + --spectrum-alias-link-secondary-text-color-default + ); --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); diff --git a/tools/styles/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css index 540e5fc590..79bcff8e59 100644 --- a/tools/styles/express/spectrum-scale-large.css +++ b/tools/styles/express/spectrum-scale-large.css @@ -124,6 +124,12 @@ --spectrum-alias-control-three-width-xl: var( --spectrum-global-dimension-static-size-550 ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-275 + ); --spectrum-alias-focus-ring-radius-default: var( --spectrum-global-dimension-static-size-115 ); @@ -259,6 +265,13 @@ --spectrum-alias-ui-icon-asterisk-size-300: var( --spectrum-global-dimension-static-size-150 ); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-button-m-primary-outline-texticon-padding-left: 17px; + --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 e79fc76ef4..c8bfce7e7a 100644 --- a/tools/styles/express/spectrum-scale-medium.css +++ b/tools/styles/express/spectrum-scale-medium.css @@ -128,6 +128,12 @@ --spectrum-alias-control-three-width-xl: var( --spectrum-global-dimension-static-size-500 ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-225 + ); --spectrum-alias-focus-ring-radius-default: var( --spectrum-global-dimension-static-size-100 ); @@ -263,6 +269,13 @@ --spectrum-alias-ui-icon-asterisk-size-300: var( --spectrum-global-dimension-static-size-125 ); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-button-m-primary-outline-texticon-padding-left: var( + --spectrum-global-dimension-size-175 + ); + --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/express/spectrum-theme-dark.css b/tools/styles/express/spectrum-theme-dark.css index 00e416afdd..8a2ccfcbcf 100644 --- a/tools/styles/express/spectrum-theme-dark.css +++ b/tools/styles/express/spectrum-theme-dark.css @@ -258,6 +258,11 @@ --spectrum-global-color-gray-900: rgb( var(--spectrum-global-color-gray-900-rgb) ); + --spectrum-alias-avatar-border-color-default: #ffffff1a; + --spectrum-alias-avatar-border-color-hover: #ffffff40; + --spectrum-alias-avatar-border-color-down: #fff6; + --spectrum-alias-avatar-border-color-key-focus: #ffffff40; + --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a; --spectrum-alias-transparent-blue-background-color-default: #7c81fb26; --spectrum-alias-transparent-blue-background-color-hover: #9195ff26; --spectrum-alias-transparent-blue-background-color-down: #a7aaff26; diff --git a/tools/styles/express/spectrum-theme-light.css b/tools/styles/express/spectrum-theme-light.css index b584769acf..e15a59ccb8 100644 --- a/tools/styles/express/spectrum-theme-light.css +++ b/tools/styles/express/spectrum-theme-light.css @@ -258,6 +258,11 @@ --spectrum-global-color-gray-900: rgb( var(--spectrum-global-color-gray-900-rgb) ); + --spectrum-alias-avatar-border-color-default: #0000001a; + --spectrum-alias-avatar-border-color-hover: #00000040; + --spectrum-alias-avatar-border-color-down: #0006; + --spectrum-alias-avatar-border-color-key-focus: #00000040; + --spectrum-alias-avatar-border-color-selected-disabled: #0000001a; --spectrum-alias-transparent-blue-background-color-default: #5258e426; --spectrum-alias-transparent-blue-background-color-hover: #4046ca26; --spectrum-alias-transparent-blue-background-color-down: #3236a826; diff --git a/tools/styles/fonts.css b/tools/styles/fonts.css index 838a0d019d..ddddc8536d 100755 --- a/tools/styles/fonts.css +++ b/tools/styles/fonts.css @@ -1,50 +1,18 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -:host, -:root { - --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-Typography { font-family: var(--spectrum-font-family); - font-size: var(--spectrum-font-size); font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } -.spectrum:lang(ar) { +.spectrum-Typography:lang(ar) { font-family: var(--spectrum-font-family-ar); } -.spectrum:lang(he) { +.spectrum-Typography:lang(he) { font-family: var(--spectrum-font-family-he); } -.spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-heading-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-heading-font-color: var(--spectrum-heading-color); +.spectrum-Typography .spectrum-Heading { --spectrum-heading-margin-start: calc( var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier) @@ -54,62 +22,30 @@ governing permissions and limitations under the License. var(--spectrum-heading-margin-bottom-multiplier) ); } -@media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: text; - } -} - -.spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); -} - -.spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); -} - -.spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); -} - -.spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--spectrum-heading-size-m); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); -} - -.spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--spectrum-heading-size-l); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); -} - -.spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); -} -.spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); +.spectrum-Typography .spectrum-Body { + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } -.spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); +.spectrum-Typography .spectrum-Detail { + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } .spectrum-Heading { - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); font-family: var( --mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family) ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); font-style: var( --mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style) @@ -118,10 +54,23 @@ governing permissions and limitations under the License. --mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight) ); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var( + --highcontrast-heading-font-color, + var(--mod-heading-font-color, var(--spectrum-heading-font-color)) + ); line-height: var( --mod-heading-line-height, var(--spectrum-heading-line-height) ); + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, @@ -168,10 +117,6 @@ governing permissions and limitations under the License. --mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family) ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); font-style: var( --mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style) @@ -180,14 +125,18 @@ governing permissions and limitations under the License. --mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight) ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) + font-size: var( + --mod-heading-cjk-font-size, + var(--spectrum-heading-cjk-font-size) ); line-height: var( --mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height) ); + letter-spacing: var( + --mod-heading-cjk-letter-spacing, + var(--spectrum-heading-cjk-letter-spacing) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, @@ -621,74 +570,11 @@ governing permissions and limitations under the License. ); } -.spectrum-Typography .spectrum-Heading { - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start) - ); -} - -.spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-body-margin: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); - --spectrum-body-font-color: var(--spectrum-body-color); -} -@media (forced-colors: active) { - .spectrum-body { - --highcontrast-body-font-color: text; - } -} - -.spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); -} - -.spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); -} - -.spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); -} - -.spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); -} - -.spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); -} - -.spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); -} - -.spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); -} - .spectrum-Body { - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); font-family: var( --mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family) ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); font-style: var( --mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style) @@ -697,7 +583,20 @@ governing permissions and limitations under the License. --mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight) ); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var( + --highcontrast-body-font-color, + var(--mod-body-font-color, var(--spectrum-body-font-color)) + ); line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, @@ -752,14 +651,14 @@ governing permissions and limitations under the License. --mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight) ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); line-height: var( --mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height) ); + letter-spacing: var( + --mod-body-cjk-letter-spacing, + var(--spectrum-body-cjk-letter-spacing) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong, @@ -818,14 +717,14 @@ governing permissions and limitations under the License. --mod-body-serif-font-family, var(--spectrum-body-serif-font-family) ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); font-weight: var( --mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight) ); + font-style: var( + --mod-body-serif-font-style, + var(--spectrum-body-serif-font-style) + ); } .spectrum-Body--serif .spectrum-Body-strong, @@ -865,60 +764,11 @@ governing permissions and limitations under the License. ); } -.spectrum-Typography .spectrum-Body { - margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); -} - .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-detail-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); - --spectrum-detail-font-color: var(--spectrum-detail-color); -} -@media (forced-colors: active) { - .spectrum-Detail { - --highcontrast-detail-font-color: text; - } -} - -.spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); -} - -.spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); -} - -.spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); -} - -.spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); -} - -.spectrum-Detail { - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); font-family: var( --mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family) ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); font-style: var( --mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style) @@ -927,15 +777,28 @@ governing permissions and limitations under the License. --mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight) ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var( + --highcontrast-detail-font-color, + var(--mod-detail-font-color, var(--spectrum-detail-font-color)) ); line-height: var( --mod-detail-line-height, var(--spectrum-detail-line-height) ); + letter-spacing: var( + --mod-detail-letter-spacing, + var(--spectrum-detail-letter-spacing) + ); text-transform: uppercase; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, @@ -1257,58 +1120,24 @@ governing permissions and limitations under the License. ); } -.spectrum-Typography .spectrum-Detail { - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end) - ); - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start) - ); -} - .spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); -} -@media (forced-colors: active) { - .spectrum-Code { - --highcontrast-code-font-color: text; - } -} - -.spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); -} - -.spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); -} - -.spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); -} - -.spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); -} - -.spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); -} - -.spectrum-Code { - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var( + --highcontrast-code-font-color, + var(--mod-code-font-color, var(--spectrum-code-font-color)) + ); + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, @@ -1363,14 +1192,14 @@ governing permissions and limitations under the License. --mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight) ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); line-height: var( --mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height) ); + letter-spacing: var( + --mod-code-cjk-letter-spacing, + var(--spectrum-code-cjk-letter-spacing) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong, @@ -1423,3 +1252,176 @@ governing permissions and limitations under the License. var(--spectrum-code-cjk-strong-emphasized-font-weight) ); } + +:root, +:host { + --spectrum-font-family-ar: var(--system-font-family-ar); + --spectrum-font-family-he: var(--system-font-family-he); + --spectrum-font-family: var(--system-font-family); + --spectrum-font-style: var(--system-font-style); + --spectrum-font-size: var(--system-font-size); +} + +.spectrum-Heading { + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var( + --system-heading-serif-font-family + ); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); +} + +.spectrum-Heading.spectrum-Heading--sizeXXS { + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXS { + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeS { + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-s-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeM { + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-m-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeL { + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-l-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXL { + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); +} + +.spectrum-Body { + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXS { + --spectrum-body-font-size: var(--system-body-size-xs-font-size); +} + +.spectrum-Body.spectrum-Body--sizeS { + --spectrum-body-font-size: var(--system-body-size-s-font-size); +} + +.spectrum-Body.spectrum-Body--sizeM { + --spectrum-body-font-size: var(--system-body-size-m-font-size); +} + +.spectrum-Body.spectrum-Body--sizeL { + --spectrum-body-font-size: var(--system-body-size-l-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXL { + --spectrum-body-font-size: var(--system-body-size-xl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXL { + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXXL { + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); +} + +.spectrum-Detail { + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeS { + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeM { + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeL { + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeXL { + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); +} + +.spectrum-Code { + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXS { + --spectrum-code-font-size: var(--system-code-size-xs-font-size); +} + +.spectrum-Code.spectrum-Code--sizeS { + --spectrum-code-font-size: var(--system-code-size-s-font-size); +} + +.spectrum-Code.spectrum-Code--sizeM { + --spectrum-code-font-size: var(--system-code-size-m-font-size); +} + +.spectrum-Code.spectrum-Code--sizeL { + --spectrum-code-font-size: var(--system-code-size-l-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXL { + --spectrum-code-font-size: var(--system-code-size-xl-font-size); +} diff --git a/tools/styles/heading.ts b/tools/styles/heading.ts index f6d7e920e3..b0a89bcc6a 100644 --- a/tools/styles/heading.ts +++ b/tools/styles/heading.ts @@ -12,6 +12,14 @@ governing permissions and limitations under the License. import baseStyles from './src/spectrum-base.css.js'; import langStyles from './src/spectrum-lang.css.js'; +import langOverrides from './src/lang-overrides.css.js'; import headingStyles from './src/spectrum-heading.css.js'; +import headingOverrides from './src/heading-overrides.css.js'; -export default [baseStyles, langStyles, headingStyles]; +export default [ + baseStyles, + langStyles, + langOverrides, + headingStyles, + headingOverrides, +]; diff --git a/tools/styles/package.json b/tools/styles/package.json index 3f3ca9db0c..ac1341c52f 100755 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -65,12 +65,22 @@ "development": "./typography.dev.js", "default": "./typography.js" }, + "./src/body-overrides.css.js": "./src/body-overrides.css.js", + "./src/code-overrides.css.js": "./src/code-overrides.css.js", + "./src/detail-overrides.css.js": "./src/detail-overrides.css.js", + "./src/heading-overrides.css.js": "./src/heading-overrides.css.js", + "./src/lang-overrides.css.js": "./src/lang-overrides.css.js", "./src/spectrum-base.css": "./src/spectrum-base.css", "./src/spectrum-body.css": "./src/spectrum-body.css", + "./src/body-overrides.css": "./src/body-overrides.css", "./src/spectrum-code.css": "./src/spectrum-code.css", + "./src/code-overrides.css": "./src/code-overrides.css", "./src/spectrum-detail.css": "./src/spectrum-code.css", + "./src/detail-overrides.css": "./src/detail-overrides.css", "./src/spectrum-heading.css": "./src/spectrum-heading.css", + "./src/heading-overrides.css": "./src/heading-overrides.css", "./src/spectrum-lang.css": "./src/spectrum-lang.css", + "./src/lang-overrides.css": "./src/lang-overrides.css", "./src/spectrum-typography.css": "./src/spectrum-typography.css", "./tokens/express/custom-large-vars.css": "./tokens/express/custom-large-vars.css", "./tokens/express/custom-medium-vars.css": "./tokens/express/custom-medium-vars.css", @@ -112,11 +122,11 @@ "@spectrum-web-components/base": "^0.47.2" }, "devDependencies": { - "@spectrum-css/commons": "^10.0.0", + "@spectrum-css/commons": "^11.0.0-s2-foundations.14", "@spectrum-css/expressvars": "^3.0.9", - "@spectrum-css/tokens": "^14.0.0", - "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@^14.0.0-next.3", - "@spectrum-css/typography": "^6.1.0", + "@spectrum-css/tokens": "^@spectrum-css/tokens@14.3.1", + "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.22", + "@spectrum-css/typography": "^7.0.0-s2-foundations.16", "@spectrum-css/vars": "^9.0.8" }, "customElements": "custom-elements.json", diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 073e9f7ca4..7df98ecf56 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -982,6 +982,9 @@ --spectrum-alias-font-family-condensed: var( --spectrum-global-font-font-family-condensed ); + --spectrum-alias-button-text-line-height: var( + --spectrum-global-font-line-height-small + ); --spectrum-alias-component-text-line-height: var( --spectrum-global-font-line-height-small ); @@ -1513,6 +1516,115 @@ --spectrum-alias-control-three-height-xl: var( --spectrum-global-dimension-size-225 ); + --spectrum-alias-infieldbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-border-radius-sided: 0; + --spectrum-alias-infieldbutton-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-infieldbutton-fill-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-fill-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-fill-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-fill-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-padding-s: 0; + --spectrum-alias-infieldbutton-padding-m: 0; + --spectrum-alias-infieldbutton-padding-l: 0; + --spectrum-alias-infieldbutton-padding-xl: 0; + --spectrum-alias-infieldbutton-full-height-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-full-height-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-infieldbutton-full-height-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-infieldbutton-full-height-xl: var( + --spectrum-global-dimension-size-600 + ); + --spectrum-alias-infieldbutton-half-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-infieldbutton-half-height-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-infieldbutton-half-height-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-infieldbutton-half-height-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-gap: 0; + --spectrum-alias-stepperbutton-width-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-stepperbutton-width-m: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-width-l: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-stepperbutton-width-xl: var( + --spectrum-global-dimension-size-450 + ); + --spectrum-alias-stepperbutton-icon-x-offset-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-x-offset-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-stepperbutton-icon-x-offset-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-radius-touching: 0; --spectrum-alias-clearbutton-icon-margin-s: var( --spectrum-global-dimension-size-100 ); @@ -1528,6 +1640,77 @@ --spectrum-alias-clearbutton-border-radius: var( --spectrum-global-dimension-size-50 ); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-label-padding-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-label-padding-y-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-label-padding-y-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-label-padding-y-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-border-radius-rounded: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; + --spectrum-alias-search-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-combobox-quiet-button-offset-x: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-thumbnail-border-radius-small: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-actiongroup-button-gap: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-compact: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-actiongroup-button-gap-quiet: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-search-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-search-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-search-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); --spectrum-alias-percent-50: 50%; --spectrum-alias-percent-70: 70%; --spectrum-alias-percent-100: 100%; @@ -1723,10 +1906,118 @@ --spectrum-alias-ui-icon-asterisk-size-100: var( --spectrum-global-dimension-size-100 ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-avatar-border-size: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-tag-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-border-size-default: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-border-size-key-focus: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-disabled: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-tag-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-padding-right-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-padding-right-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-padding-right-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-font-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-tag-font-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-tag-font-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-tag-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-icon-margin-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-icon-margin-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-tag-icon-margin-right-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-right-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-icon-margin-right-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-clearbutton-width-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-clearbutton-width-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-tag-clearbutton-width-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-tag-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-focusring-size: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-tag-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-tag-focusring-gap-selected: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-colorloupe-width: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-colorloupe-height: var( + --spectrum-global-dimension-static-size-800 + ); } :root, :host { + --spectrum-alias-colorhandle-outer-border-color: #0000006b; --spectrum-alias-transparent-blue-background-color-hover: #0057be26; --spectrum-alias-transparent-blue-background-color-down: #0048994d; --spectrum-alias-transparent-blue-background-color-key-focus: var( @@ -2028,6 +2319,205 @@ --spectrum-alias-component-border-color-emphasized-selected: var( --spectrum-alias-component-border-color-emphasized-selected-default ); + --spectrum-alias-tag-border-color-default: var( + --spectrum-alias-border-color-darker-default + ); + --spectrum-alias-tag-border-color-hover: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-down: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-error-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-selected: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-border-color: var( + --spectrum-alias-tag-border-color-default + ); + --spectrum-alias-tag-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-tag-border-color-error: var( + --spectrum-alias-tag-border-color-error-default + ); + --spectrum-alias-tag-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tag-text-color-hover: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-text-color: var( + --spectrum-alias-tag-text-color-default + ); + --spectrum-alias-tag-text-color-error-default: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-text-color-error-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-key-focus: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error: var( + --spectrum-alias-tag-text-color-error-default + ); + --spectrum-alias-tag-text-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-tag-icon-color: var( + --spectrum-alias-tag-icon-color-default + ); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-error-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error: var( + --spectrum-alias-tag-background-color-error-default + ); + --spectrum-alias-tag-background-color-error-selected-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-background-color-error-selected-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-background-color-error-selected: var( + --spectrum-alias-tag-background-color-error-selected-default + ); + --spectrum-alias-tag-background-color-selected-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tag-background-color-selected-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-tag-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-key-focus: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-focusring-border-color: var( + --spectrum-alias-tag-focusring-border-color-default + ); + --spectrum-alias-avatar-border-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color: var( + --spectrum-alias-avatar-border-color-default + ); + --spectrum-alias-avatar-border-color-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected: var( + --spectrum-alias-avatar-border-color-selected-default + ); + --spectrum-alias-avatar-border-color-selected-disabled: var( + --spectrum-alias-background-color-transparent + ); --spectrum-alias-toggle-background-color-default: var( --spectrum-global-color-gray-700 ); @@ -2079,6 +2569,186 @@ --spectrum-alias-toggle-icon-color-emphasized-selected: var( --spectrum-global-color-gray-75 ); + --spectrum-alias-button-primary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-primary-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-button-primary-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color: var( + --spectrum-alias-button-primary-background-color-default + ); + --spectrum-alias-button-primary-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-border-color-hover: var( + --spectrum-alias-button-primary-background-color-hover + ); + --spectrum-alias-button-primary-border-color-down: var( + --spectrum-alias-button-primary-background-color-down + ); + --spectrum-alias-button-primary-border-color-key-focus: var( + --spectrum-alias-button-primary-background-color-key-focus + ); + --spectrum-alias-button-primary-border-color: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-default: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-hover: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-down: var( + --spectrum-alias-button-primary-text-color-down + ); + --spectrum-alias-button-primary-icon-color-key-focus: var( + --spectrum-alias-button-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-icon-color: var( + --spectrum-alias-button-primary-icon-color-default + ); + --spectrum-alias-button-secondary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-secondary-background-color-hover: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color-down: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-secondary-background-color-key-focus: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color: var( + --spectrum-alias-button-secondary-background-color-default + ); + --spectrum-alias-button-secondary-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-border-color-hover: var( + --spectrum-alias-button-secondary-background-color-hover + ); + --spectrum-alias-button-secondary-border-color-down: var( + --spectrum-alias-button-secondary-background-color-down + ); + --spectrum-alias-button-secondary-border-color-key-focus: var( + --spectrum-alias-button-secondary-background-color-key-focus + ); + --spectrum-alias-button-secondary-border-color: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-default: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-hover: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-down: var( + --spectrum-alias-button-secondary-text-color-down + ); + --spectrum-alias-button-secondary-icon-color-key-focus: var( + --spectrum-alias-button-secondary-text-color-key-focus + ); + --spectrum-alias-button-secondary-icon-color: var( + --spectrum-alias-button-secondary-icon-color-default + ); + --spectrum-alias-button-negative-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-negative-background-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-background-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color: var( + --spectrum-alias-button-negative-background-color-default + ); + --spectrum-alias-button-negative-border-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-border-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-default: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-hover: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-down: var( + --spectrum-alias-button-negative-text-color-down + ); + --spectrum-alias-button-negative-icon-color-key-focus: var( + --spectrum-alias-button-negative-text-color-key-focus + ); + --spectrum-alias-button-negative-icon-color: var( + --spectrum-alias-button-negative-icon-color-default + ); --spectrum-alias-input-border-color-disabled: var( --spectrum-alias-border-color-transparent ); @@ -2136,6 +2806,92 @@ --spectrum-alias-background-color-yellow: var( --spectrum-alias-background-color-yellow-default ); + --spectrum-alias-infieldbutton-background-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-infieldbutton-fill-border-color-default: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-infieldbutton-fill-border-color-hover: var( + --spectrum-alias-input-border-color-hover + ); + --spectrum-alias-infieldbutton-fill-border-color-down: var( + --spectrum-alias-input-border-color-down + ); + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( + --spectrum-alias-input-border-color-mouse-focus + ); + --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( + --spectrum-alias-input-border-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( + --spectrum-alias-component-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( + --spectrum-alias-component-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( + --spectrum-alias-component-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; + --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; + --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-tabs-divider-background-color-default: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tabs-divider-background-color-quiet: var( + --spectrum-alias-background-color-transparent + ); --spectrum-alias-tabitem-text-color-default: var( --spectrum-alias-label-text-color ); @@ -2288,6 +3044,36 @@ --spectrum-alias-text-color-overbackground-disabled: #fff3; --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-link-primary-text-color-key-focus: var( + --spectrum-alias-text-color-key-focus + ); + --spectrum-alias-link-primary-text-color: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-default: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-hover: var( + --spectrum-alias-link-primary-text-color-hover + ); + --spectrum-alias-link-secondary-text-color-down: var( + --spectrum-alias-link-primary-text-color-down + ); + --spectrum-alias-link-secondary-text-color-key-focus: var( + --spectrum-alias-link-primary-text-color-key-focus + ); + --spectrum-alias-link-secondary-text-color: var( + --spectrum-alias-link-secondary-text-color-default + ); --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); @@ -2327,6 +3113,12 @@ --spectrum-alias-track-color-disabled: var( --spectrum-global-color-gray-300 ); + --spectrum-alias-thumbnail-darksquare-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-thumbnail-lightsquare-background-color: var( + --spectrum-global-color-static-white + ); --spectrum-alias-track-color-overbackground: #fff3; --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); --spectrum-alias-icon-color-overbackground: var( diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css index 5e9b4b0f94..d356820f46 100644 --- a/tools/styles/spectrum-scale-large.css +++ b/tools/styles/spectrum-scale-large.css @@ -129,6 +129,9 @@ ); --spectrum-alias-control-three-width-l: 41px; --spectrum-alias-control-three-width-xl: 46px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); --spectrum-alias-focus-ring-border-radius-regular: var( --spectrum-global-dimension-static-size-115 ); @@ -267,6 +270,19 @@ --spectrum-alias-ui-icon-asterisk-size-300: var( --spectrum-global-dimension-static-size-150 ); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-button-m-primary-outline-texticon-padding-left: 17px; + --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 e6ab5a2bc3..6568129fef 100644 --- a/tools/styles/spectrum-scale-medium.css +++ b/tools/styles/spectrum-scale-medium.css @@ -127,6 +127,9 @@ ); --spectrum-alias-control-three-width-l: 29px; --spectrum-alias-control-three-width-xl: 33px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); --spectrum-alias-focus-ring-border-radius-regular: var( --spectrum-global-dimension-static-size-100 ); @@ -265,6 +268,19 @@ --spectrum-alias-ui-icon-asterisk-size-300: var( --spectrum-global-dimension-static-size-125 ); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-button-m-primary-outline-texticon-padding-left: var( + --spectrum-global-dimension-size-175 + ); + --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 new file mode 100644 index 0000000000..e72ac3d9c2 --- /dev/null +++ b/tools/styles/src/body-overrides.css @@ -0,0 +1,51 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Body { + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXS { + --spectrum-body-font-size: var(--system-body-size-xs-font-size); +} + +.spectrum-Body.spectrum-Body--sizeS { + --spectrum-body-font-size: var(--system-body-size-s-font-size); +} + +.spectrum-Body.spectrum-Body--sizeM { + --spectrum-body-font-size: var(--system-body-size-m-font-size); +} + +.spectrum-Body.spectrum-Body--sizeL { + --spectrum-body-font-size: var(--system-body-size-l-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXL { + --spectrum-body-font-size: var(--system-body-size-xl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXL { + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXXL { + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); +} diff --git a/tools/styles/src/code-overrides.css b/tools/styles/src/code-overrides.css new file mode 100644 index 0000000000..6fee249be5 --- /dev/null +++ b/tools/styles/src/code-overrides.css @@ -0,0 +1,39 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Code { + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXS { + --spectrum-code-font-size: var(--system-code-size-xs-font-size); +} + +.spectrum-Code.spectrum-Code--sizeS { + --spectrum-code-font-size: var(--system-code-size-s-font-size); +} + +.spectrum-Code.spectrum-Code--sizeM { + --spectrum-code-font-size: var(--system-code-size-m-font-size); +} + +.spectrum-Code.spectrum-Code--sizeL { + --spectrum-code-font-size: var(--system-code-size-l-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXL { + --spectrum-code-font-size: var(--system-code-size-xl-font-size); +} diff --git a/tools/styles/src/detail-overrides.css b/tools/styles/src/detail-overrides.css new file mode 100644 index 0000000000..bf33521d72 --- /dev/null +++ b/tools/styles/src/detail-overrides.css @@ -0,0 +1,38 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Detail { + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeS { + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeM { + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeL { + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeXL { + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); +} diff --git a/tools/styles/src/heading-overrides.css b/tools/styles/src/heading-overrides.css new file mode 100644 index 0000000000..70f8f14242 --- /dev/null +++ b/tools/styles/src/heading-overrides.css @@ -0,0 +1,84 @@ +/* + Copyright 2023 Adobe. All rights reserved. + This file is licensed to you under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy + of the License at http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software distributed under + the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + OF ANY KIND, either express or implied. See the License for the specific language + governing permissions and limitations under the License. + */ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Heading { + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var( + --system-heading-serif-font-family + ); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); +} + +.spectrum-Heading.spectrum-Heading--sizeXXS { + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXS { + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeS { + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-s-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeM { + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-m-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeL { + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-l-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXL { + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); +} diff --git a/tools/styles/src/lang-overrides.css b/tools/styles/src/lang-overrides.css new file mode 100644 index 0000000000..b1cee0dbcd --- /dev/null +++ b/tools/styles/src/lang-overrides.css @@ -0,0 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ diff --git a/tools/styles/src/spectrum-body.css b/tools/styles/src/spectrum-body.css index b4e4f583a3..3b75f4b56c 100644 --- a/tools/styles/src/spectrum-body.css +++ b/tools/styles/src/spectrum-body.css @@ -11,46 +11,17 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-body-margin: calc( +.spectrum-Typography .spectrum-Body { + --spectrum-body-margin-end: calc( var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier) ); - --spectrum-body-font-color: var(--spectrum-body-color); -} - -.spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); -} - -.spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); -} - -.spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); -} - -.spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); -} - -.spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); -} - -.spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); } -.spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); +@media (forced-colors: active) { + .spectrum-Body { + --highcontrast-body-font-color: Text; + } } .spectrum-Body { @@ -72,7 +43,14 @@ governing permissions and limitations under the License. var(--mod-body-font-color, var(--spectrum-body-font-color)) ); line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block: 0; + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, @@ -240,10 +218,6 @@ governing permissions and limitations under the License. ); } -.spectrum-Typography .spectrum-Body { - margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); -} - .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized { font-style: var( --mod-detail-sans-serif-light-strong-emphasized-font-style, @@ -266,9 +240,3 @@ governing permissions and limitations under the License. var(--spectrum-detail-serif-light-strong-emphasized-font-weight) ); } - -@media (forced-colors: active) { - .spectrum-Body { - --highcontrast-body-font-color: Text; - } -} diff --git a/tools/styles/src/spectrum-code.css b/tools/styles/src/spectrum-code.css index ab1ead74e9..a628316dbc 100644 --- a/tools/styles/src/spectrum-code.css +++ b/tools/styles/src/spectrum-code.css @@ -11,38 +11,12 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); -} - @media (forced-colors: active) { .spectrum-Code { --highcontrast-code-font-color: Text; } } -.spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); -} - -.spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); -} - -.spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); -} - -.spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); -} - -.spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); -} - .spectrum-Code { font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); @@ -53,7 +27,14 @@ governing permissions and limitations under the License. --highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)) ); - margin-block: 0; + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, diff --git a/tools/styles/src/spectrum-detail.css b/tools/styles/src/spectrum-detail.css index 40d4a0a82d..17d6726a3d 100644 --- a/tools/styles/src/spectrum-detail.css +++ b/tools/styles/src/spectrum-detail.css @@ -11,14 +11,7 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-detail-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); +.spectrum-Typography .spectrum-Detail { --spectrum-detail-margin-start: calc( var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier) @@ -27,23 +20,12 @@ governing permissions and limitations under the License. var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier) ); - --spectrum-detail-font-color: var(--spectrum-detail-color); -} - -.spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); -} - -.spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); -} - -.spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); } -.spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); +@media (forced-colors: active) { + .spectrum-Detail { + --highcontrast-detail-font-color: Text; + } } .spectrum-Detail { @@ -73,7 +55,14 @@ governing permissions and limitations under the License. var(--spectrum-detail-letter-spacing) ); text-transform: uppercase; - margin-block: 0; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, @@ -394,20 +383,3 @@ governing permissions and limitations under the License. var(--spectrum-detail-serif-light-strong-emphasized-font-weight) ); } - -.spectrum-Typography .spectrum-Detail { - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end) - ); -} - -@media (forced-colors: active) { - .spectrum-Detail { - --highcontrast-detail-font-color: Text; - } -} diff --git a/tools/styles/src/spectrum-heading.css b/tools/styles/src/spectrum-heading.css index 9788395f48..e7d20131d7 100644 --- a/tools/styles/src/spectrum-heading.css +++ b/tools/styles/src/spectrum-heading.css @@ -11,16 +11,7 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-heading-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-heading-font-color: var(--spectrum-heading-color); +.spectrum-Typography .spectrum-Heading { --spectrum-heading-margin-start: calc( var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier) @@ -31,44 +22,10 @@ governing permissions and limitations under the License. ); } -.spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); -} - -.spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); -} - -.spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); -} - -.spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--spectrum-heading-size-m); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); -} - -.spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--spectrum-heading-size-l); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); -} - -.spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); -} - -.spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); -} - -.spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); +@media (forced-colors: active) { + .spectrum-Heading { + --highcontrast-heading-font-color: Text; + } } .spectrum-Heading { @@ -93,7 +50,14 @@ governing permissions and limitations under the License. --mod-heading-line-height, var(--spectrum-heading-line-height) ); - margin-block: 0; + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, @@ -592,20 +556,3 @@ governing permissions and limitations under the License. var(--spectrum-heading-serif-light-strong-emphasized-font-weight) ); } - -.spectrum-Typography .spectrum-Heading { - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end) - ); -} - -@media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: Text; - } -} diff --git a/tools/styles/src/spectrum-lang.css b/tools/styles/src/spectrum-lang.css index 01c800c149..15535783fc 100644 --- a/tools/styles/src/spectrum-lang.css +++ b/tools/styles/src/spectrum-lang.css @@ -11,11 +11,11 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum:lang(ar) { +.spectrum-Typography:lang(ar) { font-family: var(--spectrum-font-family-ar); } -.spectrum:lang(he) { +.spectrum-Typography:lang(he) { font-family: var(--spectrum-font-family-he); } diff --git a/tools/styles/src/spectrum-typography.css b/tools/styles/src/spectrum-typography.css index 4d5e53d783..7e3e87e1f5 100644 --- a/tools/styles/src/spectrum-typography.css +++ b/tools/styles/src/spectrum-typography.css @@ -11,28 +11,45 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Typography { + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); +} + +.spectrum-Typography:lang(ar) { + font-family: var(--spectrum-font-family-ar); +} + +.spectrum-Typography:lang(he) { + font-family: var(--spectrum-font-family-he); +} + .spectrum-Typography .spectrum-Heading { - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start) + --spectrum-heading-margin-start: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-top-multiplier) ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end) + --spectrum-heading-margin-end: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-bottom-multiplier) ); } .spectrum-Typography .spectrum-Body { - margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } .spectrum-Typography .spectrum-Detail { - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start) + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end) + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) ); } diff --git a/tools/styles/tokens-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css index a8acb26f31..d941c4a363 100644 --- a/tools/styles/tokens-v2/dark-vars.css +++ b/tools/styles/tokens-v2/dark-vars.css @@ -1,12 +1,6 @@ :host, :root { --spectrum-overlay-opacity: 0.6; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.8; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); --spectrum-background-layer-2-color: var(--spectrum-gray-75); --spectrum-neutral-subdued-background-color-default: var( --spectrum-gray-500 @@ -113,6 +107,18 @@ --spectrum-turquoise-background-color-default: var( --spectrum-turquoise-700 ); + --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-opacity-checkerboard-square-dark: var(--spectrum-gray-800); --spectrum-gray-25-rgb: 17, 17, 17; --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); @@ -720,4 +726,86 @@ --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-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index 30f896a805..08e7a7e8fb 100644 --- a/tools/styles/tokens-v2/global-vars.css +++ b/tools/styles/tokens-v2/global-vars.css @@ -4,6 +4,7 @@ --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); @@ -96,6 +97,16 @@ --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); @@ -105,15 +116,13 @@ --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-1000); + --spectrum-color-area-border-color: var(--spectrum-gray-900); --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-1000); + --spectrum-color-slider-border-color: var(--spectrum-gray-900); --spectrum-color-slider-border-opacity: 0.1; --spectrum-color-loupe-drop-shadow-color: var( --spectrum-transparent-black-300 ); - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; --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); @@ -310,11 +319,9 @@ --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-top-margin-medium: 0px; - --spectrum-field-label-top-margin-large: 0px; - --spectrum-field-label-top-margin-extra-large: 0px; --spectrum-field-label-to-component: 0px; --spectrum-help-text-to-component: 0px; --spectrum-status-light-dot-size-small: 8px; @@ -381,12 +388,14 @@ --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: 4; + --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; @@ -501,93 +510,6 @@ --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-asterisk-icon-size-75: 8px; - --spectrum-divider-vertical-minimum-height: 200px; - --spectrum-divider-horizontal-minimum-width: 200px; - --spectrum-tooltip-tip-corner-radius: 1px; - --spectrum-tag-minimum-width-multiplier: 1; - --spectrum-tag-maximum-width-multiplier: 7; - --spectrum-title-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-title-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-title-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-title-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-title-cjk-font-weight: var(--spectrum-bold-font-weight); - --spectrum-title-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-title-cjk-size-l: var(--spectrum-font-size-200); - --spectrum-title-cjk-size-m: var(--spectrum-font-size-100); - --spectrum-title-cjk-size-s: var(--spectrum-font-size-75); - --spectrum-title-cjk-size-xl: var(--spectrum-font-size-300); - --spectrum-title-cjk-size-xs: var(--spectrum-font-size-50); - --spectrum-title-cjk-size-xxl: var(--spectrum-font-size-400); - --spectrum-title-cjk-size-xxxl: var(--spectrum-font-size-500); - --spectrum-title-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-title-cjk-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-title-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-title-cjk-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-title-line-height: var(--spectrum-line-height-100); - --spectrum-title-margin-bottom-multiplier: 0.25; - --spectrum-title-margin-top-multiplier: 0.88888889; - --spectrum-title-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-title-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-title-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-title-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-title-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-title-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-title-sans-serif-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-title-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-title-sans-serif-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-title-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-title-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-title-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-title-serif-font-style: var(--spectrum-default-font-style); - --spectrum-title-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-title-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-title-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-title-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-title-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-title-size-l: var(--spectrum-font-size-300); - --spectrum-title-size-m: var(--spectrum-font-size-200); - --spectrum-title-size-s: var(--spectrum-font-size-100); - --spectrum-title-size-xl: var(--spectrum-font-size-400); - --spectrum-title-size-xs: var(--spectrum-font-size-75); - --spectrum-title-size-xxl: var(--spectrum-font-size-500); - --spectrum-title-size-xxxl: var(--spectrum-font-size-600); --spectrum-corner-radius-0: 0px; --spectrum-corner-radius-75: 3px; --spectrum-corner-radius-100: 4px; @@ -599,39 +521,6 @@ --spectrum-corner-radius-700: 10px; --spectrum-corner-radius-800: 16px; --spectrum-corner-radius-1000: 0.5; - --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-side-label-character-count-top-margin-small: 0px; - --spectrum-side-label-character-count-top-margin-medium: 0px; - --spectrum-side-label-character-count-top-margin-large: 0px; - --spectrum-side-label-character-count-top-margin-extra-large: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-component-size-width-ratio-down: 0.3333; - --spectrum-component-size-minimum-perspective-down: 24px; - --spectrum-component-size-difference-down: -2px; --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); @@ -665,6 +554,32 @@ --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); @@ -1245,4 +1160,49 @@ --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-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) + ); } diff --git a/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css new file mode 100644 index 0000000000..4aef892f82 --- /dev/null +++ b/tools/styles/tokens-v2/index.css @@ -0,0 +1,4126 @@ +: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-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-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-gray-25-rgb: 17, 17, 17; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 27, 27, 27; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 34, 34, 34; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 44, 44, 44; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 50, 50, 50; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 57, 57, 57; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 68, 68, 68; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 109, 109, 109; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 138, 138, 138; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 175, 175, 175; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 219, 219, 219; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 242, 242, 242; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 255, 255, 255; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 14, 23, 63; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 15, 28, 82; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 12, 33, 117; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 18, 45, 154; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 26, 58, 195; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 37, 73, 229; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 91, 248; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 69, 110, 254; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 86, 129, 255; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 105, 149, 254; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 124, 169, 252; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 152, 192, 252; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 181, 213, 253; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 213, 231, 254; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 238, 245, 255; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 255, 255, 255; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 54, 10, 3; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 68, 13, 5; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 87, 17, 7; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 115, 24, 11; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 147, 31, 17; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 177, 38, 23; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 205, 46, 29; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 230, 54, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 252, 67, 46; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 103, 86; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 134, 120; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 167, 157; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 196, 189; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 222, 219; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 255, 242, 240; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 255, 255, 255; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 49, 16, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 61, 21, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 80, 27, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 106, 36, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 135, 47, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 162, 59, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 185, 73, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 205, 86, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 224, 100, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 243, 117, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 137, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 173, 45; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 201, 116; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 225, 178; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 255, 243, 225; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 255, 255, 255; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 37, 23, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 47, 29, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 61, 39, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 83, 52, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 107, 67, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 130, 82, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 151, 97, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 169, 110, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 186, 124, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 203, 141, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 218, 159, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 235, 183, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 206, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 230, 86; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 255, 246, 195; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 255, 255, 255; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 23, 28, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 30, 36, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 39, 47, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 53, 63, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 68, 82, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 83, 100, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 97, 116, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 109, 131, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 122, 147, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 136, 164, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 151, 181, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 169, 203, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 187, 225, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 219, 240, 117; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 242, 249, 206; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 255, 255, 255; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 11, 31, 0; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 15, 38, 0; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 21, 51, 1; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 31, 67, 4; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 41, 86, 8; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 50, 105, 11; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 60, 122, 15; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 69, 138, 19; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 78, 154, 23; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 88, 172, 28; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 100, 190, 35; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 116, 213, 46; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 136, 234, 65; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 170, 251, 112; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 222, 255, 198; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 255, 255, 255; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 0, 30, 23; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 38, 29; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 51, 38; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 68, 48; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 2, 87, 58; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 3, 106, 67; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 4, 124, 75; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 6, 140, 82; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 9, 157, 89; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 14, 175, 98; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 24, 193, 110; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 57, 215, 134; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 126, 231, 172; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 189, 241, 208; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 229, 250, 236; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 255, 255, 255; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 0, 30, 27; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 0, 39, 35; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 0, 50, 44; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 67, 59; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 2, 86, 75; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 4, 105, 89; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 6, 122, 103; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 8, 138, 116; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 10, 154, 128; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 12, 173, 142; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 14, 190, 156; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 29, 214, 176; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 122, 229, 203; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 186, 241, 222; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 229, 249, 243; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 255, 255, 255; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 0, 29, 39; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 36, 49; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 48, 65; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 64, 88; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 82, 113; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 3, 99, 140; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 8, 115, 168; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 15, 128, 194; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 24, 142, 220; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 38, 159, 244; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 63, 177, 255; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 107, 199, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 152, 219, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 195, 236, 252; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 230, 248, 253; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 255, 255, 255; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 30, 0, 93; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 0, 110; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 47, 0, 140; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 62, 12, 174; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 79, 30, 209; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 95, 52, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 109, 75, 248; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 119, 97, 252; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 128, 119, 254; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 139, 141, 254; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 153, 161, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 176, 186, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 199, 208, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 223, 228, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 243, 244, 255; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 255, 255, 255; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 41, 0, 79; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 50, 0, 96; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 64, 0, 122; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 83, 0, 159; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 107, 6, 195; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 130, 34, 215; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 148, 62, 224; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 161, 84, 229; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 173, 105, 233; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 186, 127, 237; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 197, 149, 240; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 212, 176, 244; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 225, 201, 247; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 238, 224, 250; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 248, 243, 253; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 255, 255, 255; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 50, 0, 61; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 61, 0, 74; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 79, 0, 95; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 102, 9, 120; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 127, 23, 146; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 151, 38, 170; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 173, 51, 192; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 192, 64, 212; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 213, 73, 235; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 232, 91, 253; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 240, 122, 255; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 245, 159, 255; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 248, 191, 255; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 251, 219, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 253, 241, 255; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 255, 255, 255; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 59, 0, 22; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 74, 0, 27; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 93, 0, 34; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 123, 0, 45; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 152, 7, 60; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 181, 19, 76; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 207, 31, 92; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 231, 41, 105; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 51, 119; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 96, 149; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 128, 171; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 163, 194; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 193, 214; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 220, 232; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 255, 241, 246; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 255, 255, 255; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 58, 0, 37; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 71, 0, 44; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 90, 0, 57; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 115, 7, 75; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 143, 18, 97; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 171, 29, 119; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 196, 39, 138; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 220, 47, 156; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 236, 67, 175; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 251, 90, 196; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 255, 122, 210; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 255, 159, 223; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 255, 191, 234; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 255, 219, 243; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 255, 241, 250; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 255, 255, 255; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 0, 30, 33; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 0, 37, 41; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 0, 49, 54; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 0, 66, 72; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 3, 84, 92; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 5, 103, 112; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 7, 120, 131; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 9, 135, 147; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 11, 151, 164; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 13, 168, 182; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 16, 186, 202; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 64, 208, 220; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 128, 225, 231; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 183, 240, 240; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 228, 249, 249; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 255, 255, 255; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 35, 24, 8; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 44, 31, 11; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 58, 40, 14; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 78, 55, 19; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 98, 71, 30; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 115, 88, 47; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 132, 104, 61; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 148, 118, 73; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 163, 132, 84; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 181, 147, 98; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 199, 163, 112; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 222, 185, 130; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 232, 207, 169; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 242, 227, 206; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 250, 244, 236; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 255, 255, 255; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 26, 26, 26; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 33, 33, 33; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 44, 44, 44; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 59, 59, 59; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 76, 76, 76; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 92, 92, 92; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 108, 108, 108; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 123, 123, 123; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 137, 137, 137; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 152, 152, 152; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 169, 169, 169; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 190, 190, 190; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 211, 211, 211; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 229, 229, 229; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 244, 244, 244; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 255, 255, 255; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 48, 17, 4; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 59, 21, 5; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 79, 28, 7; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 100, 41, 15; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 122, 57, 28; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 143, 74, 40; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 163, 88, 52; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 179, 103, 64; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 192, 119, 80; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 206, 136, 99; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 220, 154, 118; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 232, 179, 149; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 239, 203, 183; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 246, 225, 214; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 252, 244, 239; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 255, 255, 255; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); +} + +:host, +:root { + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); + --spectrum-opacity-disabled: 0.3; + --spectrum-background-base-color: var(--spectrum-gray-25); + --spectrum-background-layer-1-color: var(--spectrum-gray-50); + --spectrum-neutral-background-color-default: var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-hover: var( + --spectrum-gray-900 + ); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-900 + ); + --spectrum-neutral-subdued-content-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-accent-content-color-selected: var( + --spectrum-accent-content-color-down + ); + --spectrum-disabled-background-color: var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); + --spectrum-disabled-static-black-background-color: var( + --spectrum-transparent-black-100 + ); + --spectrum-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-focus: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-content-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-disabled-content-color: var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color: var( + --spectrum-transparent-white-400 + ); + --spectrum-disabled-static-black-content-color: var( + --spectrum-transparent-black-400 + ); + --spectrum-disabled-border-color: var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color: var( + --spectrum-transparent-white-300 + ); + --spectrum-disabled-static-black-border-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-negative-border-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var( + --spectrum-negative-border-color-down + ); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-title-color: var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color: var( + --spectrum-drop-shadow-color-100 + ); + --spectrum-drop-shadow-emphasized-hover-color: var( + --spectrum-drop-shadow-color-200 + ); + --spectrum-drop-shadow-elevated-color: var( + --spectrum-drop-shadow-color-200 + ); + --spectrum-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-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-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-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-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: 3px; + --spectrum-corner-radius-100: 4px; + --spectrum-corner-radius-200: 5px; + --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-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-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: 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-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-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); +} + +:host, +:root { + --spectrum-overlay-opacity: 0.4; + --spectrum-background-layer-2-color: var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default: var( + --spectrum-gray-700 + ); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-background-color-default: var( + --spectrum-accent-color-900 + ); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-900 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-1000 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-900 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-1000 + ); + --spectrum-notice-background-color-default: var( + --spectrum-notice-color-600 + ); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-900); + --spectrum-orange-background-color-default: var(--spectrum-orange-600); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-500 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-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-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-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --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-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-800 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1100 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); +} + +:host, +:root { + --spectrum-workflow-icon-size-50: 14px; + --spectrum-workflow-icon-size-75: 16px; + --spectrum-workflow-icon-size-100: 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-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-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var( + --spectrum-spacing-400 + ); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); +} diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css index ade4542c96..ebaac88556 100644 --- a/tools/styles/tokens-v2/large-vars.css +++ b/tools/styles/tokens-v2/large-vars.css @@ -1,5 +1,55 @@ :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; @@ -8,14 +58,14 @@ --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: 30px; - --spectrum-switch-control-width-medium: 34px; - --spectrum-switch-control-width-large: 38px; + --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-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; @@ -36,22 +86,17 @@ --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: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-help-text-top-to-workflow-icon-medium: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-help-text-top-to-workflow-icon-large: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-help-text-top-to-workflow-icon-extra-large: var( - --spectrum-component-top-to-workflow-icon-300 - ); + --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; @@ -62,8 +107,8 @@ --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: 12px; - --spectrum-tooltip-tip-height: 6px; + --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; @@ -71,11 +116,11 @@ --spectrum-progress-circle-thickness-small: 3px; --spectrum-progress-circle-thickness-medium: 4px; --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 60px; + --spectrum-toast-height: 56px; --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 20px; - --spectrum-toast-top-to-text: 20px; - --spectrum-toast-bottom-to-text: 22px; + --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; @@ -152,10 +197,7 @@ --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: var( - --spectrum-opacity-checkerboard-square-size-medium - ); - --spectrum-opacity-checkerboard-square-size-medium: 10px; + --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; @@ -353,77 +395,17 @@ --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-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-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-side-navigation-header-to-item: 10px; - --spectrum-switch-handle-size-small: 10px; - --spectrum-switch-handle-selected-size-small: 12px; - --spectrum-switch-handle-selected-size-medium: 14px; - --spectrum-switch-handle-selected-size-large: 16px; - --spectrum-switch-handle-selected-size-extra-large: 20px; - --spectrum-switch-handle-size-medium: 12px; - --spectrum-switch-handle-size-large: 14px; - --spectrum-switch-handle-size-extra-large: 18px; - --spectrum-tag-label-to-clear-icon-small: 10px; - --spectrum-tag-label-to-clear-icon-medium: 15px; - --spectrum-tag-label-to-clear-icon-large: 19px; - --spectrum-tag-edge-to-clear-icon-small: 10px; - --spectrum-tag-edge-to-clear-icon-medium: 15px; - --spectrum-tag-edge-to-clear-icon-large: 19px; - --spectrum-opacity-checkerboard-square-size-small: 5px; + --spectrum-accordion-top-to-text-spacious-small: 12px; --spectrum-drop-shadow-y: 2px; --spectrum-drop-shadow-blur: 6px; - --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-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-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; @@ -452,21 +434,21 @@ --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: 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-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: 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-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; @@ -521,13 +503,16 @@ --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: var(--spectrum-field-width-small); - --spectrum-field-width-small: 240px; + --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; @@ -537,13 +522,6 @@ --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-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-field-width-medium: 256px; - --spectrum-field-width-large: 272px; - --spectrum-field-width-extra-large: 288px; --spectrum-font-size-50: 13px; --spectrum-font-size-75: 15px; --spectrum-font-size-100: 17px; @@ -559,4 +537,109 @@ --spectrum-font-size-1100: 55px; --spectrum-font-size-1200: 62px; --spectrum-font-size-1300: 70px; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; + + --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; + --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-colorwheel-colorarea-container-size: 182px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; + + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-200 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } diff --git a/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css index cb20577406..ca4459968d 100644 --- a/tools/styles/tokens-v2/light-vars.css +++ b/tools/styles/tokens-v2/light-vars.css @@ -1,12 +1,6 @@ :host, :root { --spectrum-overlay-opacity: 0.4; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.15; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); --spectrum-background-layer-2-color: var(--spectrum-gray-25); --spectrum-neutral-subdued-background-color-default: var( --spectrum-gray-700 @@ -113,6 +107,18 @@ --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-opacity-checkerboard-square-dark: var(--spectrum-gray-200); --spectrum-gray-25-rgb: 255, 255, 255; --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); @@ -720,4 +726,86 @@ --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-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-800 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1100 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css index 3777d920d8..eea69ad377 100644 --- a/tools/styles/tokens-v2/medium-vars.css +++ b/tools/styles/tokens-v2/medium-vars.css @@ -1,5 +1,55 @@ :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; @@ -8,14 +58,14 @@ --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: 22px; + --spectrum-switch-control-width-small: 23px; --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 30px; - --spectrum-switch-control-width-extra-large: 34px; - --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-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; @@ -35,23 +85,18 @@ --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: 18px; + --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: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --spectrum-help-text-top-to-workflow-icon-medium: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --spectrum-help-text-top-to-workflow-icon-large: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --spectrum-help-text-top-to-workflow-icon-extra-large: var( - --spectrum-component-top-to-workflow-icon-300 - ); + --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; @@ -62,8 +107,8 @@ --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: 10px; - --spectrum-tooltip-tip-height: 5px; + --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; @@ -71,11 +116,11 @@ --spectrum-progress-circle-thickness-small: 2px; --spectrum-progress-circle-thickness-medium: 3px; --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 52px; + --spectrum-toast-height: 48px; --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 18px; - --spectrum-toast-top-to-text: 18px; - --spectrum-toast-bottom-to-text: 20px; + --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; @@ -152,10 +197,7 @@ --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: var( - --spectrum-opacity-checkerboard-square-size-medium - ); - --spectrum-opacity-checkerboard-square-size-medium: 8px; + --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; @@ -182,11 +224,11 @@ --spectrum-avatar-size-500: 32px; --spectrum-avatar-size-600: 36px; --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 56px; + --spectrum-alert-banner-minimum-height: 48px; --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 19px; - --spectrum-alert-banner-top-to-text: 18px; - --spectrum-alert-banner-bottom-to-text: 20px; + --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; @@ -353,77 +395,17 @@ --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-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-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-side-navigation-header-to-item: 8px; - --spectrum-switch-handle-size-small: 6px; - --spectrum-switch-handle-selected-size-small: 8px; - --spectrum-switch-handle-selected-size-medium: 10px; - --spectrum-switch-handle-selected-size-large: 12px; - --spectrum-switch-handle-selected-size-extra-large: 14px; - --spectrum-switch-handle-size-medium: 8px; - --spectrum-switch-handle-size-large: 10px; - --spectrum-switch-handle-size-extra-large: 12px; - --spectrum-tag-label-to-clear-icon-small: 8px; - --spectrum-tag-label-to-clear-icon-medium: 12px; - --spectrum-tag-label-to-clear-icon-large: 15px; - --spectrum-tag-edge-to-clear-icon-small: 8px; - --spectrum-tag-edge-to-clear-icon-medium: 12px; - --spectrum-tag-edge-to-clear-icon-large: 15px; - --spectrum-opacity-checkerboard-square-size-small: 4px; + --spectrum-accordion-top-to-text-spacious-small: 9px; --spectrum-drop-shadow-y: 1px; --spectrum-drop-shadow-blur: 4px; - --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-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-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; @@ -454,9 +436,9 @@ --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: 6px; - --spectrum-component-edge-to-visual-only-200: 9px; - --spectrum-component-edge-to-visual-only-300: 11px; + --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; @@ -464,9 +446,9 @@ --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: 6px; - --spectrum-component-top-to-workflow-icon-200: 9px; - --spectrum-component-top-to-workflow-icon-300: 11px; + --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; @@ -521,13 +503,16 @@ --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: var(--spectrum-field-width-small); - --spectrum-field-width-small: 192px; + --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; @@ -537,13 +522,6 @@ --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-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-field-width-medium: 208px; - --spectrum-field-width-large: 224px; - --spectrum-field-width-extra-large: 240px; --spectrum-font-size-50: 11px; --spectrum-font-size-75: 12px; --spectrum-font-size-100: 14px; @@ -559,4 +537,111 @@ --spectrum-font-size-1100: 45px; --spectrum-font-size-1200: 50px; --spectrum-font-size-1300: 60px; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; + + --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; + --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-colorwheel-colorarea-container-size: 144px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; + + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-100 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var( + --spectrum-spacing-400 + ); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css index 568ee96dca..29f34058b4 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/spectrum/global-vars.css @@ -1,1359 +1,7258 @@ :host, :root { - --system-spectrum-actionbutton-background-color-default: var( - --spectrum-gray-75 + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text ); - --system-spectrum-actionbutton-background-color-hover: var( - --spectrum-gray-200 + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator ); - --system-spectrum-actionbutton-background-color-down: var( - --spectrum-gray-300 + --system-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text ); - --system-spectrum-actionbutton-background-color-focus: var( - --spectrum-gray-200 + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-actionbutton-border-color-default: var( - --spectrum-gray-400 + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content ); - --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-actionbutton-background-color-disabled: transparent; - --system-spectrum-actionbutton-border-color-disabled: var( - --spectrum-disabled-border-color + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --system-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-actionbutton-content-color-disabled: var( + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-default: transparent; - --system-spectrum-actionbutton-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-down: var( - --spectrum-gray-300 + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-actionbutton-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-accordion-divider-color: var(--spectrum-gray-200); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-quiet-background-color-disabled: transparent; - --system-spectrum-actionbutton-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-selected-border-color-default: transparent; - --system-spectrum-actionbutton-selected-border-color-hover: transparent; - --system-spectrum-actionbutton-selected-border-color-down: transparent; - --system-spectrum-actionbutton-selected-border-color-focus: transparent; - --system-spectrum-actionbutton-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-selected-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-background-color-default: transparent; - --system-spectrum-actionbutton-staticblack-background-color-hover: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticblack-background-color-down: var( - --spectrum-transparent-black-400 + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-actionbutton-staticblack-background-color-focus: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-actionbutton-staticblack-border-color-default: var( - --spectrum-transparent-black-400 + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs ); - --system-spectrum-actionbutton-staticblack-border-color-hover: var( - --spectrum-transparent-black-500 + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-border-color-down: var( - --spectrum-transparent-black-600 + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-border-color-focus: var( - --spectrum-transparent-black-500 + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-content-color-default: var( - --spectrum-black + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-content-color-hover: var( - --spectrum-black + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-content-color-down: var( - --spectrum-black + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-content-color-focus: var( - --spectrum-black + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-actionbutton-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var( + --spectrum-body-size-s ); - --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-black-800 + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-black-900 + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-black-900 + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-black-900 + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( - --spectrum-white + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( - --spectrum-white + --system-accordion-size-l-item-content-font-size: var( + --spectrum-body-size-m ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( - --spectrum-white + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( - --spectrum-white + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-accordion-size-xl-item-height: var( + --spectrum-component-height-400 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-background-color-hover: var( - --spectrum-transparent-white-300 + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 ); - --system-spectrum-actionbutton-staticwhite-background-color-down: var( - --spectrum-transparent-white-400 + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-actionbutton-staticwhite-background-color-focus: var( - --spectrum-transparent-white-300 + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 ); - --system-spectrum-actionbutton-staticwhite-border-color-default: var( - --spectrum-transparent-white-400 + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l ); - --system-spectrum-actionbutton-staticwhite-border-color-hover: var( - --spectrum-transparent-white-500 + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-border-color-down: var( - --spectrum-transparent-white-600 + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-border-color-focus: var( - --spectrum-transparent-white-500 + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticwhite-content-color-default: var( - --spectrum-white + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-content-color-hover: var( - --spectrum-white + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-content-color-down: var( - --spectrum-white + --system-accordion-compact-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-content-color-focus: var( - --spectrum-white + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-white-800 + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( - --spectrum-black + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( - --spectrum-black + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( - --spectrum-black + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( - --spectrum-black + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; -} - -:host, -:root { - --system-spectrum-actiongroup-gap-size-compact: 0; - --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; - --system-spectrum-actiongroup-vertical-spacing-compact: -1px; } :host, :root { - --system-spectrum-alertbanner-spectrum-alert-banner-netural-background: var( - --spectrum-neutral-subdued-background-color-default + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var( + --spectrum-line-height-100 ); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-25); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-spectrum-button-background-color-default: var(--spectrum-gray-75); - --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); - --system-spectrum-button-background-color-down: var(--spectrum-gray-300); - --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); - --system-spectrum-button-border-color-default: var(--spectrum-gray-400); - --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-button-border-color-down: var(--spectrum-gray-600); - --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-button-content-color-default: var( + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( --spectrum-neutral-content-color-default ); - --system-spectrum-button-content-color-hover: var( + --system-action-button-content-color-hover: var( --spectrum-neutral-content-color-hover ); - --system-spectrum-button-content-color-down: var( + --system-action-button-content-color-down: var( --spectrum-neutral-content-color-down ); - --system-spectrum-button-content-color-focus: var( + --system-action-button-content-color-focus: var( --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-background-color-disabled: transparent; - --system-spectrum-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-spectrum-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-spectrum-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-spectrum-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-spectrum-button-accent-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap ); - --system-spectrum-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-accent-border-color-default: transparent; - --system-spectrum-button-accent-border-color-hover: transparent; - --system-spectrum-button-accent-border-color-down: transparent; - --system-spectrum-button-accent-border-color-focus: transparent; - --system-spectrum-button-accent-content-color-default: var( - --spectrum-white + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); - --system-spectrum-button-accent-content-color-down: var(--spectrum-white); - --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); - --system-spectrum-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-background-color-default: var(--spectrum-gray-50); + --system-action-button-background-color-hover: var(--spectrum-gray-100); + --system-action-button-background-color-down: var(--spectrum-gray-200); + --system-action-button-background-color-focus: var(--spectrum-gray-100); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-spectrum-button-accent-border-color-disabled: transparent; - --system-spectrum-button-accent-content-color-disabled: var( + --system-action-button-content-color-disabled: var( --spectrum-disabled-content-color ); - --system-spectrum-button-accent-outline-background-color-default: transparent; - --system-spectrum-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-spectrum-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-100 ); - --system-spectrum-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-200 ); - --system-spectrum-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-100 ); - --system-spectrum-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default ); - --system-spectrum-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-spectrum-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-spectrum-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-spectrum-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down + --system-action-button-selected-content-color-hover: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-background-color-disabled: transparent; - --system-spectrum-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default ); - --system-spectrum-button-negative-background-color-default: var( - --spectrum-negative-background-color-default + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover ); - --system-spectrum-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down ); - --system-spectrum-button-negative-background-color-down: var( - --spectrum-negative-background-color-down + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus ); - --system-spectrum-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white ); - --system-spectrum-button-negative-border-color-default: transparent; - --system-spectrum-button-negative-border-color-hover: transparent; - --system-spectrum-button-negative-border-color-down: transparent; - --system-spectrum-button-negative-border-color-focus: transparent; - --system-spectrum-button-negative-content-color-default: var( + --system-action-button-selected-emphasized-content-color-hover: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-hover: var( + --system-action-button-selected-emphasized-content-color-down: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-down: var(--spectrum-white); - --system-spectrum-button-negative-content-color-focus: var( + --system-action-button-selected-emphasized-content-color-focus: var( --spectrum-white ); - --system-spectrum-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-400 ); - --system-spectrum-button-negative-border-color-disabled: transparent; - --system-spectrum-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-500 ); - --system-spectrum-button-negative-outline-background-color-default: transparent; - --system-spectrum-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-400 ); - --system-spectrum-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-500 ); - --system-spectrum-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-600 ); - --system-spectrum-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-700 ); - --system-spectrum-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-600 ); - --system-spectrum-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color ); - --system-spectrum-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default + --system-action-button-static-black-content-color-hover: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover + --system-action-button-static-black-content-color-down: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down + --system-action-button-static-black-content-color-focus: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color ); - --system-spectrum-button-negative-outline-background-color-disabled: transparent; - --system-spectrum-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color ); - --system-spectrum-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-300 ); - --system-spectrum-button-primary-border-color-default: transparent; - --system-spectrum-button-primary-border-color-hover: transparent; - --system-spectrum-button-primary-border-color-down: transparent; - --system-spectrum-button-primary-border-color-focus: transparent; - --system-spectrum-button-primary-content-color-default: var( + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( --spectrum-white ); - --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); - --system-spectrum-button-primary-content-color-down: var(--spectrum-white); - --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); - --system-spectrum-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-spectrum-button-primary-border-color-disabled: transparent; - --system-spectrum-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-outline-background-color-default: transparent; - --system-spectrum-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-border-color-default: var( - --spectrum-gray-800 + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-primary-outline-border-color-hover: var( + --system-action-button-static-black-selected-emphasized-content-color-hover: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-down: var( + --system-action-button-static-black-selected-emphasized-content-color-down: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-focus: var( + --system-action-button-static-black-selected-emphasized-content-color-focus: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 ); - --system-spectrum-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 ); - --system-spectrum-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-400 ); - --system-spectrum-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-500 ); - --system-spectrum-button-primary-outline-background-color-disabled: transparent; - --system-spectrum-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-600 ); - --system-spectrum-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-700 ); - --system-spectrum-button-secondary-background-color-default: var( - --spectrum-gray-200 + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-600 ); - --system-spectrum-button-secondary-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color ); - --system-spectrum-button-secondary-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-content-color-default: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-content-color-hover: var( + --spectrum-white ); - --system-spectrum-button-secondary-border-color-default: transparent; - --system-spectrum-button-secondary-border-color-hover: transparent; - --system-spectrum-button-secondary-border-color-down: transparent; - --system-spectrum-button-secondary-border-color-focus: transparent; - --system-spectrum-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-content-color-down: var( + --spectrum-white ); - --system-spectrum-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-content-color-focus: var( + --spectrum-white ); - --system-spectrum-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color ); - --system-spectrum-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color ); - --system-spectrum-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-border-color-disabled: transparent; - --system-spectrum-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-background-color-default: transparent; - --system-spectrum-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-300 ); - --system-spectrum-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) ); - --system-spectrum-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 ); - --system-spectrum-button-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 ); - --system-spectrum-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small ); - --system-spectrum-button-quiet-background-color-default: transparent; - --system-spectrum-button-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 ); - --system-spectrum-button-quiet-background-color-down: var( - --spectrum-gray-300 + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 ); - --system-spectrum-button-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-button-quiet-border-color-default: transparent; - --system-spectrum-button-quiet-border-color-hover: transparent; - --system-spectrum-button-quiet-border-color-down: transparent; - --system-spectrum-button-quiet-border-color-focus: transparent; - --system-spectrum-button-quiet-background-color-disabled: transparent; - --system-spectrum-button-quiet-border-color-disabled: transparent; - --system-spectrum-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) ); - --system-spectrum-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 ); - --system-spectrum-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 ); - --system-spectrum-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small ); - --system-spectrum-button-selected-border-color-default: transparent; - --system-spectrum-button-selected-border-color-hover: transparent; - --system-spectrum-button-selected-border-color-down: transparent; - --system-spectrum-button-selected-border-color-focus: transparent; - --system-spectrum-button-selected-content-color-default: var( - --spectrum-white + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 ); - --system-spectrum-button-selected-content-color-hover: var( - --spectrum-white + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 ); - --system-spectrum-button-selected-content-color-down: var(--spectrum-white); - --system-spectrum-button-selected-content-color-focus: var( - --spectrum-white + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-selected-border-color-disabled: transparent; - --system-spectrum-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-staticblack-quiet-border-color-default: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-button-staticblack-quiet-border-color-down: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-spectrum-button-staticwhite-background-color-hover: var( - --spectrum-transparent-white-900 + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-staticwhite-background-color-down: var( - --spectrum-transparent-white-900 + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 ); - --system-spectrum-button-staticwhite-background-color-focus: var( - --spectrum-transparent-white-900 + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 ); - --system-spectrum-button-staticwhite-border-color-default: transparent; - --system-spectrum-button-staticwhite-border-color-hover: transparent; - --system-spectrum-button-staticwhite-border-color-down: transparent; - --system-spectrum-button-staticwhite-border-color-focus: transparent; - --system-spectrum-button-staticwhite-content-color-default: var( - --spectrum-black + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 ); - --system-spectrum-button-staticwhite-content-color-hover: var( - --spectrum-black + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 ); - --system-spectrum-button-staticwhite-content-color-down: var( - --spectrum-black + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-button-staticwhite-content-color-focus: var( - --spectrum-black + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-button-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) ); - --system-spectrum-button-staticwhite-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 ); - --system-spectrum-button-staticwhite-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticwhite-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large ); - --system-spectrum-button-staticwhite-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 ); - --system-spectrum-button-staticwhite-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 ); - --system-spectrum-button-staticwhite-outline-border-color-default: var( - --spectrum-transparent-white-800 + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-button-staticwhite-outline-border-color-hover: var( - --spectrum-transparent-white-900 + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) ); - --system-spectrum-button-staticwhite-outline-border-color-down: var( - --spectrum-transparent-white-900 + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 ); - --system-spectrum-button-staticwhite-outline-border-color-focus: var( - --spectrum-transparent-white-900 + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 ); - --system-spectrum-button-staticwhite-outline-content-color-default: var( - --spectrum-white + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large ); - --system-spectrum-button-staticwhite-outline-content-color-hover: var( - --spectrum-white + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 ); - --system-spectrum-button-staticwhite-outline-content-color-down: var( - --spectrum-white + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 ); - --system-spectrum-button-staticwhite-outline-content-color-focus: var( - --spectrum-white + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 ); - --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( +} + +:host, +:root { + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); +} + +:host, +:root { + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --system-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-200); + --system-asset-file-background-color: var(--spectrum-gray-25); + --system-asset-icon-outline-color: var(--spectrum-gray-500); +} + +:host, +:root { + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); +} + +:host, +:root { + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var( + --spectrum-text-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); +} + +:host, +:root { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-50); + --system-button-background-color-hover: var(--spectrum-gray-100); + --system-button-background-color-down: var(--spectrum-gray-200); + --system-button-background-color-focus: var(--spectrum-gray-100); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-gray-25); + --system-button-primary-content-color-hover: var(--spectrum-gray-25); + --system-button-primary-content-color-down: var(--spectrum-gray-25); + --system-button-primary-content-color-focus: var(--spectrum-gray-25); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-100 + ); + --system-button-secondary-background-color-hover: var(--spectrum-gray-200); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-200); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-700 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-size-m-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); +} + +:host, +:root { + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var( + --spectrum-spacing-200 + ); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-50); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); +} + +:host, +:root { + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-100); + --system-card-border-color-hover: var(--spectrum-gray-200); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-200); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --system-card-preview-background-color: var(--spectrum-gray-100); + --system-card-preview-background-color-hover: var(--spectrum-gray-200); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); +} + +:host, +:root { + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent + ); + --system-clear-button-over-background-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-500) + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-background-color: transparent; +} + +: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-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-icon-color-default: var( + --spectrum-white + ); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( --spectrum-static-white-focus-indicator-color ); - --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-icon-color-default: var( + --spectrum-black + ); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); +} + +:host, +:root { + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; +} + +:host, +:root { + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-medium-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-color-area-border-radius: var( + --spectrum-color-area-border-rounding + ); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); +} + +:host, +:root { + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var( + --spectrum-color-control-track-width + ); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var( + --spectrum-color-handle-border-width + ); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); +} + +:host, +:root { + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var( + --spectrum-color-loupe-drop-shadow-y + ); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); +} + +:host, +:root { + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var( + --spectrum-field-label-to-component + ); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); +} + +:host, +:root { + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); +} + +:host, +:root { + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} + +:host, +:root { + --system-divider-background-color-small: var(--spectrum-gray-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-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-200); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); +} + +:host, +:root { + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: '\002c'; +} + +:host, +:root { + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-l-min-height: var( + --spectrum-component-height-100 + ); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var( + --spectrum-component-height-200 + ); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var( + --spectrum-spacing-200 + ); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); +} + +:host, +:root { + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); +} + +:host, +:root { + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); +} + +:host, +:root { + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-up-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-up-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-up-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-up-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-up-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var( + --spectrum-asterisk-icon-size-75 + ); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); +} + +: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 + ); + --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; +} + +:host, +:root { + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); +} + +:host, +:root { + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-text-to-control) + + var(--system-menu-item-icon-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: var(--spectrum-gray-25); + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-1000), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-1000), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-1000), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var( + --spectrum-workflow-icon-size-75 + ); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-menu-size-s-item-description-font-size: var( + --spectrum-font-size-50 + ); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var( + --spectrum-font-size-75 + ); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-icon-width: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var( + --spectrum-font-size-300 + ); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); +} + +:host, +:root { + --system-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 + ); +} + +:host, +:root { + --system-picker-background-color-default: var(--spectrum-gray-50); + --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-active: var(--spectrum-gray-200); + --system-picker-background-color-hover: var(--spectrum-gray-100); + --system-picker-background-color-hover-open: var(--spectrum-gray-100); + --system-picker-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); +} + +: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); + --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 + ); +} + +:host, +:root { + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); +} + +:host, +:root { + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --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-thickness: var( + --spectrum-progress-bar-thickness-medium + ); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --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-fill-color-positive: var( + --spectrum-positive-visual-color + ); + --system-progress-bar-fill-color-notice: var( + --spectrum-notice-visual-color + ); + --system-progress-bar-fill-color-negative: var( + --spectrum-negative-visual-color + ); + --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-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-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-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-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-size-s-progressbar-thickness: var( + --spectrum-meter-thickness-small + ); + --system-meter-size-s-progressbar-size-default: var( + --system-progress-bar-size-2400 + ); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-meter-size-l-progressbar-thickness: var( + --spectrum-meter-thickness-large + ); + --system-meter-size-l-progressbar-size-default: var( + --system-progress-bar-size-2500 + ); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); +} + +:host, +:root { + --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 + ); +} + +:host, +:root { + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); +} + +:host, +:root { + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-25); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); +} + +:host, +:root { + --system-side-nav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-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 + ); +} + +: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-value-inline-size: 18px; + --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-handle-margin-left: calc( + var(--system-slider-handle-size) / -2 + ); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc( + var(--system-slider-controls-margin) * -1 + ); + --system-slider-track-middle-handleoffset: calc( + var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2 + ); + --system-slider-input-top-size: calc( + var(--system-slider-handle-size) / -2 / 4 + ); + --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-input-left: calc( + var(--system-slider-handle-margin-left) / 4 + ); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --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-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-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; +} + +:host, +:root { + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-75); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-200); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); +} + +:host, +:root { + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --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 + ); +} + +:host, +:root { + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-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); +} + +:host, +:root { + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-black-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-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: 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-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); +} + +:host, +:root { + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); +} + +:host, +:root { + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; +} + +:host, +:root { + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-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); +} + +:host, +:root { + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-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-spectrum-button-staticwhite-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --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-spectrum-button-staticwhite-selected-background-color-default: var( - --spectrum-transparent-white-800 + --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-spectrum-button-staticwhite-selected-background-color-hover: var( - --spectrum-transparent-white-900 + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-selected-background-color-down: var( - --spectrum-transparent-white-900 + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-button-staticwhite-selected-background-color-focus: var( - --spectrum-transparent-white-900 + --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-spectrum-button-staticwhite-selected-content-color-default: var( - --spectrum-black + --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-spectrum-button-staticwhite-selected-content-color-hover: var( - --spectrum-black + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color ); - --system-spectrum-button-staticwhite-selected-content-color-down: var( - --spectrum-black + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized ); - --system-spectrum-button-staticwhite-selected-content-color-focus: var( - --spectrum-black + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus ); - --system-spectrum-button-staticwhite-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --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 + ); +} + +:host, +:root { + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-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 + ); +} + +:host, +:root { + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-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-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-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-background-color-default: var( - --spectrum-transparent-white-200 + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-background-color-hover: var( - --spectrum-transparent-white-300 + --system-scope-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium ); - --system-spectrum-button-staticwhite-secondary-background-color-down: var( - --spectrum-transparent-white-400 + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium ); - --system-spectrum-button-staticwhite-secondary-background-color-focus: var( - --spectrum-transparent-white-300 + --system-scope-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-default: var( - --spectrum-white + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-hover: var( - --spectrum-white + --system-scope-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-down: var( - --spectrum-white + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-focus: var( - --spectrum-white + --system-scope-tag-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-scope-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-scope-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-scope-tag-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 + --system-scope-tag-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 + --system-scope-tag-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( - --spectrum-white + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( - --spectrum-white + --system-scope-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( - --spectrum-white + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( - --spectrum-white + --system-scope-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-scope-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-background-color-default: var( - --spectrum-transparent-black-800 + --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-spectrum-button-staticblack-background-color-hover: var( - --spectrum-transparent-black-900 + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large ); - --system-spectrum-button-staticblack-background-color-down: var( - --spectrum-transparent-black-900 + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-background-color-focus: var( - --spectrum-transparent-black-900 + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-border-color-default: transparent; - --system-spectrum-button-staticblack-border-color-hover: transparent; - --system-spectrum-button-staticblack-border-color-down: transparent; - --system-spectrum-button-staticblack-border-color-focus: transparent; - --system-spectrum-button-staticblack-content-color-default: var( - --spectrum-white + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-content-color-hover: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-content-color-down: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-content-color-focus: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 ); - --system-spectrum-button-staticblack-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius ); - --system-spectrum-button-staticblack-border-color-disabled: transparent; - --system-spectrum-button-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start ); - --system-spectrum-button-staticblack-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-background-color-down: var( - --spectrum-transparent-black-400 + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-background-color-focus: var( - --spectrum-transparent-black-300 +} + +:host, +:root { + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); +} + +:host, +:root { + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 ); - --system-spectrum-button-staticblack-outline-border-color-default: var( - --spectrum-transparent-black-400 + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier ); - --system-spectrum-button-staticblack-outline-border-color-hover: var( - --spectrum-transparent-black-500 + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet ); - --system-spectrum-button-staticblack-outline-border-color-down: var( - --spectrum-transparent-black-600 + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticblack-outline-border-color-focus: var( - --spectrum-transparent-black-500 + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-button-staticblack-outline-content-color-default: var( - --spectrum-black + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet ); - --system-spectrum-button-staticblack-outline-content-color-hover: var( - --spectrum-black + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component ); - --system-spectrum-button-staticblack-outline-content-color-down: var( - --spectrum-black + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component ); - --system-spectrum-button-staticblack-outline-content-color-focus: var( - --spectrum-black + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet ); - --system-spectrum-button-staticblack-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet ); - --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --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-spectrum-button-staticblack-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight ); - --system-spectrum-button-staticblack-secondary-background-color-default: var( - --spectrum-transparent-black-200 + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 ); - --system-spectrum-button-staticblack-secondary-background-color-hover: var( - --spectrum-transparent-black-300 + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field ); - --system-spectrum-button-staticblack-secondary-background-color-down: var( - --spectrum-transparent-black-400 + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-staticblack-secondary-background-color-focus: var( - --spectrum-transparent-black-300 + --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-spectrum-button-staticblack-secondary-border-color-default: transparent; - --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; - --system-spectrum-button-staticblack-secondary-border-color-down: transparent; - --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; - --system-spectrum-button-staticblack-secondary-content-color-default: var( - --spectrum-black + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover ); - --system-spectrum-button-staticblack-secondary-content-color-hover: var( - --spectrum-black + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus ); - --system-spectrum-button-staticblack-secondary-content-color-down: var( - --spectrum-black + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-content-color-focus: var( - --spectrum-black + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color ); - --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default ); - --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover ); - --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus ); - --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus ); - --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color ); - --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( - --spectrum-black + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( - --spectrum-black + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( - --spectrum-black + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( - --spectrum-black + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width ); - --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height ); - --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --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-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 ); -} - -:host, -:root { - --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); -} - -:host, -:root { - --system-spectrum-closebutton-background-color-default: transparent; - --system-spectrum-closebutton-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 ); - --system-spectrum-closebutton-background-color-down: var( - --spectrum-gray-300 + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-closebutton-background-color-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 ); -} - -:host, -:root { - --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-combobox-border-color-focus-hover: var( - --spectrum-gray-600 + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 ); - --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); -} - -:host, -:root { - --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( - --spectrum-border-width-100 + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-infield-button-border-radius-reset + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-infield-button-border-radius-reset + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( - --spectrum-gray-75 + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( - --spectrum-gray-300 + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); -} - -:host, -:root { - --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); - --system-spectrum-picker-background-color-default-open: var( - --spectrum-gray-200 + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small ); - --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); - --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --system-spectrum-picker-background-color-hover-open: var( - --spectrum-gray-200 + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small ); - --system-spectrum-picker-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 ); - --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); - --system-spectrum-picker-border-color-default-open: var( - --spectrum-gray-500 + --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-spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); - --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-spectrum-picker-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( - --spectrum-gray-75 + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( - --spectrum-gray-300 + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; - --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( - --spectrum-border-width-100 + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); -} - -:host, -:root { - --system-spectrum-popover-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-spectrum-radio-button-border-color-default: var( - --spectrum-gray-600 + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-spectrum-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 + --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-spectrum-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); - --system-spectrum-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); -} - -:host, -:root { - --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --system-spectrum-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); - --system-spectrum-search-border-color-default: var(--spectrum-gray-500); - --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - --system-spectrum-search-sizes-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); - --system-spectrum-search-sizes-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-sizem-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-sizem-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); - --system-spectrum-search-sizel-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); - --system-spectrum-search-sizel-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-search-sizexl-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-search-sizexl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); -} - -:host, -:root { - --system-spectrum-slider-track-color: var(--spectrum-gray-300); - --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --system-spectrum-slider-ramp-track-color-disabled: var( - --spectrum-gray-200 + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); - --system-spectrum-slider-handle-background-color: transparent; - --system-spectrum-slider-handle-background-color-disabled: transparent; - --system-spectrum-slider-ramp-handle-background-color: var( - --spectrum-gray-100 + --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-spectrum-slider-ticks-handle-background-color: var( - --spectrum-gray-100 + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --system-spectrum-slider-handle-disabled-background-color: var( - --spectrum-gray-100 + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --system-spectrum-slider-handle-border-color-hover: var( - --spectrum-gray-800 + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-spectrum-slider-handle-border-color-key-focus: var( - --spectrum-gray-800 + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); -} - -:host, -:root { - --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); - --system-spectrum-stepper-buttons-border-style: none; - --system-spectrum-stepper-buttons-border-width: 0; - --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-spectrum-stepper-buttons-border-color-hover: var( - --spectrum-gray-600 + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); - --system-spectrum-stepper-buttons-border-color-focus: var( - --spectrum-gray-800 + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); - --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); - --system-spectrum-stepper-button-border-radius-reset: 0px; - --system-spectrum-stepper-button-border-width: var( - --spectrum-border-width-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-spectrum-stepper-border-color: var(--spectrum-gray-500); - --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-stepper-border-color-focus-hover: var( - --spectrum-gray-800 + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-stepper-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 ); - --system-spectrum-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 ); - --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large ); - --system-spectrum-stepper-button-background-color-focus: var( - --spectrum-gray-300 + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large ); - --system-spectrum-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large ); -} - -:host, -:root { - --system-spectrum-switch-handle-border-color-default: var( - --spectrum-gray-600 + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-hover: var( - --spectrum-gray-700 + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-spectrum-switch-handle-border-color-focus: var( - --spectrum-gray-700 + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 ); - --system-spectrum-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-switch-handle-border-color-selected-down: var( - --spectrum-gray-900 + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large ); - --system-spectrum-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large ); -} - -:host, -:root { - --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); -} - -:host, -:root { - --system-spectrum-tag-border-color: var(--spectrum-gray-700); - --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); - --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-tag-size-small-corner-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 ); - --system-spectrum-tag-size-medium-corner-radius: var( - --spectrum-corner-radius-100 + --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-spectrum-tag-size-large-corner-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-tag-background-color: var(--spectrum-gray-75); - --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); - --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); - --system-spectrum-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 ); - --system-spectrum-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 ); - --system-spectrum-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large ); - --system-spectrum-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large ); - --system-spectrum-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large ); - --system-spectrum-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large ); - --system-spectrum-tag-border-color-disabled: transparent; - --system-spectrum-tag-background-color-disabled: var( - --spectrum-disabled-background-color + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large ); - --system-spectrum-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large ); - --system-spectrum-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 ); - --system-spectrum-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large ); - --system-spectrum-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large ); - --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 ); - --system-spectrum-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 +} + +:host, +:root { + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-color-opacity) + ); + --system-thumbnail-layer-border-width-inner: var( + --spectrum-border-width-400 + ); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var( + --spectrum-border-width-100 ); - --system-spectrum-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-spectrum-textfield-border-color: var(--spectrum-gray-500); - --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-textfield-border-color-focus-hover: var( - --spectrum-gray-900 + --system-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default ); - --system-spectrum-textfield-border-color-keyboard-focus: var( - --spectrum-gray-900 + --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-spectrum-textfield-border-width: var(--spectrum-border-width-100); + --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); } :host, :root { - --system-spectrum-toast-background-color-default: var( + --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); } :host, :root { - --system-spectrum-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); +} + +:host, +:root { + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); +} + +:host, +:root { + --system-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --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 index b7122a3d8c..f43989ec31 100644 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ b/tools/styles/tokens/express/custom-dark-vars.css @@ -1,11 +1,7 @@ :host, :root { - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --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/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css index b7122a3d8c..f43989ec31 100644 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ b/tools/styles/tokens/express/custom-darkest-vars.css @@ -1,11 +1,7 @@ :host, :root { - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --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/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css index 5d8167c3f2..f6a897274d 100644 --- a/tools/styles/tokens/express/custom-light-vars.css +++ b/tools/styles/tokens/express/custom-light-vars.css @@ -1,11 +1,7 @@ :host, :root { - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-800-rgb - ); /* var(--spectrum-accent-color-800);*/ + --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/dark-vars.css b/tools/styles/tokens/express/dark-vars.css new file mode 100644 index 0000000000..667dfefee0 --- /dev/null +++ b/tools/styles/tokens/express/dark-vars.css @@ -0,0 +1,14 @@ +: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/darkest-vars.css b/tools/styles/tokens/express/darkest-vars.css new file mode 100644 index 0000000000..667dfefee0 --- /dev/null +++ b/tools/styles/tokens/express/darkest-vars.css @@ -0,0 +1,14 @@ +: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/global-vars.css b/tools/styles/tokens/express/global-vars.css index cd5521a82a..0b0150bc22 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -49,1350 +49,7269 @@ --spectrum-heading-serif-emphasized-font-weight: var( --spectrum-black-font-weight ); + --system: express; } :host, :root { - --system-spectrum-actionbutton-background-color-default: var( - --spectrum-gray-200 + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text ); - --system-spectrum-actionbutton-background-color-hover: var( - --spectrum-gray-300 + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator ); - --system-spectrum-actionbutton-background-color-down: var( - --spectrum-gray-400 + --system-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text ); - --system-spectrum-actionbutton-background-color-focus: var( - --spectrum-gray-300 + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-actionbutton-border-color-default: transparent; - --system-spectrum-actionbutton-border-color-hover: transparent; - --system-spectrum-actionbutton-border-color-down: transparent; - --system-spectrum-actionbutton-border-color-focus: transparent; - --system-spectrum-actionbutton-background-color-disabled: var( - --spectrum-disabled-background-color + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --system-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) ); - --system-spectrum-actionbutton-border-color-disabled: transparent; - --system-spectrum-actionbutton-content-color-disabled: var( + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-default: transparent; - --system-spectrum-actionbutton-quiet-background-color-hover: var( - --spectrum-gray-300 + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-down: var( - --spectrum-gray-400 + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-actionbutton-quiet-background-color-focus: var( - --spectrum-gray-300 + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-quiet-background-color-disabled: transparent; - --system-spectrum-actionbutton-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-selected-border-color-default: transparent; - --system-spectrum-actionbutton-selected-border-color-hover: transparent; - --system-spectrum-actionbutton-selected-border-color-down: transparent; - --system-spectrum-actionbutton-selected-border-color-focus: transparent; - --system-spectrum-actionbutton-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-selected-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-background-color-default: var( - --spectrum-transparent-black-200 + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticblack-background-color-hover: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-actionbutton-staticblack-background-color-down: var( - --spectrum-transparent-black-400 + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-actionbutton-staticblack-background-color-focus: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs ); - --system-spectrum-actionbutton-staticblack-border-color-default: transparent; - --system-spectrum-actionbutton-staticblack-border-color-hover: transparent; - --system-spectrum-actionbutton-staticblack-border-color-down: transparent; - --system-spectrum-actionbutton-staticblack-border-color-focus: transparent; - --system-spectrum-actionbutton-staticblack-content-color-default: var( - --spectrum-black + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-content-color-hover: var( - --spectrum-black + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-content-color-down: var( - --spectrum-black + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-content-color-focus: var( - --spectrum-black + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-black-800 + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var( + --spectrum-body-size-s ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-black-900 + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-black-900 + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-black-900 + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( - --spectrum-white + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( - --spectrum-white + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( - --spectrum-white + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( - --spectrum-white + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-accordion-size-l-item-content-font-size: var( + --spectrum-body-size-m ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-background-color-default: var( - --spectrum-transparent-white-200 + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large ); - --system-spectrum-actionbutton-staticwhite-background-color-hover: var( - --spectrum-transparent-white-300 + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large ); - --system-spectrum-actionbutton-staticwhite-background-color-down: var( - --spectrum-transparent-white-400 + --system-accordion-size-xl-item-height: var( + --spectrum-component-height-400 ); - --system-spectrum-actionbutton-staticwhite-background-color-focus: var( - --spectrum-transparent-white-300 + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 ); - --system-spectrum-actionbutton-staticwhite-border-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-hover: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-down: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-focus: transparent; - --system-spectrum-actionbutton-staticwhite-content-color-default: var( - --spectrum-white + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-actionbutton-staticwhite-content-color-hover: var( - --spectrum-white + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 ); - --system-spectrum-actionbutton-staticwhite-content-color-down: var( - --spectrum-white + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l ); - --system-spectrum-actionbutton-staticwhite-content-color-focus: var( - --spectrum-white + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-white-800 + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-white-900 + --system-accordion-compact-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-white-900 + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( - --spectrum-black + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( - --spectrum-black + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( - --spectrum-black + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( - --spectrum-black + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; -} - -:host, -:root { - --system-spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - --system-spectrum-actiongroup-horizontal-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large ); - --system-spectrum-actiongroup-vertical-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large ); } :host, :root { - --system-spectrum-alertbanner-spectrum-alert-banner-netural-background: var( - --spectrum-neutral-background-color-default + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var( + --spectrum-line-height-100 + ); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-spectrum-button-background-color-default: var(--spectrum-gray-200); - --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); - --system-spectrum-button-background-color-down: var(--spectrum-gray-400); - --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); - --system-spectrum-button-border-color-default: transparent; - --system-spectrum-button-border-color-hover: transparent; - --system-spectrum-button-border-color-down: transparent; - --system-spectrum-button-border-color-focus: transparent; - --system-spectrum-button-content-color-default: var( + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( --spectrum-neutral-content-color-default ); - --system-spectrum-button-content-color-hover: var( + --system-action-button-content-color-hover: var( --spectrum-neutral-content-color-hover ); - --system-spectrum-button-content-color-down: var( + --system-action-button-content-color-down: var( --spectrum-neutral-content-color-down ); - --system-spectrum-button-content-color-focus: var( + --system-action-button-content-color-focus: var( --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-spectrum-button-border-color-disabled: transparent; - --system-spectrum-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-spectrum-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-spectrum-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-spectrum-button-accent-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap ); - --system-spectrum-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-accent-border-color-default: transparent; - --system-spectrum-button-accent-border-color-hover: transparent; - --system-spectrum-button-accent-border-color-down: transparent; - --system-spectrum-button-accent-border-color-focus: transparent; - --system-spectrum-button-accent-content-color-default: var( - --spectrum-white + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); - --system-spectrum-button-accent-content-color-down: var(--spectrum-white); - --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); - --system-spectrum-button-accent-background-color-disabled: var( + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-background-color-disabled: var( --spectrum-disabled-background-color ); - --system-spectrum-button-accent-border-color-disabled: transparent; - --system-spectrum-button-accent-content-color-disabled: var( + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-disabled: var( --spectrum-disabled-content-color ); - --system-spectrum-button-accent-outline-background-color-default: transparent; - --system-spectrum-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-300 ); - --system-spectrum-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-400 ); - --system-spectrum-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-300 ); - --system-spectrum-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default ); - --system-spectrum-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-spectrum-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-spectrum-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-spectrum-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus + --system-action-button-selected-content-color-hover: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-background-color-disabled: transparent; - --system-spectrum-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-negative-background-color-default: var( - --spectrum-negative-background-color-default + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default ); - --system-spectrum-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover ); - --system-spectrum-button-negative-background-color-down: var( - --spectrum-negative-background-color-down + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down ); - --system-spectrum-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus ); - --system-spectrum-button-negative-border-color-default: transparent; - --system-spectrum-button-negative-border-color-hover: transparent; - --system-spectrum-button-negative-border-color-down: transparent; - --system-spectrum-button-negative-border-color-focus: transparent; - --system-spectrum-button-negative-content-color-default: var( + --system-action-button-selected-emphasized-content-color-default: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-hover: var( + --system-action-button-selected-emphasized-content-color-hover: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-down: var(--spectrum-white); - --system-spectrum-button-negative-content-color-focus: var( + --system-action-button-selected-emphasized-content-color-down: var( --spectrum-white ); - --system-spectrum-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-spectrum-button-negative-border-color-disabled: transparent; - --system-spectrum-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-spectrum-button-negative-outline-background-color-default: transparent; - --system-spectrum-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white ); - --system-spectrum-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: var( + --spectrum-transparent-black-200 ); - --system-spectrum-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-spectrum-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-spectrum-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-spectrum-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color ); - --system-spectrum-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default + --system-action-button-static-black-content-color-hover: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover + --system-action-button-static-black-content-color-down: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down + --system-action-button-static-black-content-color-focus: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color ); - --system-spectrum-button-negative-outline-background-color-disabled: transparent; - --system-spectrum-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color ); - --system-spectrum-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 ); - --system-spectrum-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 ); - --system-spectrum-button-primary-border-color-default: transparent; - --system-spectrum-button-primary-border-color-hover: transparent; - --system-spectrum-button-primary-border-color-down: transparent; - --system-spectrum-button-primary-border-color-focus: transparent; - --system-spectrum-button-primary-content-color-default: var( + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( --spectrum-white ); - --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); - --system-spectrum-button-primary-content-color-down: var(--spectrum-white); - --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); - --system-spectrum-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-spectrum-button-primary-border-color-disabled: transparent; - --system-spectrum-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-outline-background-color-default: transparent; - --system-spectrum-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-border-color-default: var( - --spectrum-gray-800 + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-primary-outline-border-color-hover: var( + --system-action-button-static-black-selected-emphasized-content-color-hover: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-down: var( + --system-action-button-static-black-selected-emphasized-content-color-down: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-focus: var( + --system-action-button-static-black-selected-emphasized-content-color-focus: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-background-color-default: var( + --spectrum-transparent-white-200 ); - --system-spectrum-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-spectrum-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-spectrum-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-spectrum-button-primary-outline-background-color-disabled: transparent; - --system-spectrum-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color ); - --system-spectrum-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-content-color-default: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-default: var( - --spectrum-gray-200 + --system-action-button-static-white-content-color-hover: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-content-color-down: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-content-color-focus: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color ); - --system-spectrum-button-secondary-border-color-default: transparent; - --system-spectrum-button-secondary-border-color-hover: transparent; - --system-spectrum-button-secondary-border-color-down: transparent; - --system-spectrum-button-secondary-border-color-focus: transparent; - --system-spectrum-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color ); - --system-spectrum-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 ); - --system-spectrum-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-border-color-disabled: transparent; - --system-spectrum-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 ); - --system-spectrum-button-secondary-outline-background-color-default: transparent; - --system-spectrum-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) ); - --system-spectrum-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 ); - --system-spectrum-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 ); - --system-spectrum-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small ); - --system-spectrum-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 ); - --system-spectrum-button-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 ); - --system-spectrum-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-button-quiet-background-color-default: transparent; - --system-spectrum-button-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) ); - --system-spectrum-button-quiet-background-color-down: var( - --spectrum-gray-300 + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 ); - --system-spectrum-button-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 ); - --system-spectrum-button-quiet-border-color-default: transparent; - --system-spectrum-button-quiet-border-color-hover: transparent; - --system-spectrum-button-quiet-border-color-down: transparent; - --system-spectrum-button-quiet-border-color-focus: transparent; - --system-spectrum-button-quiet-background-color-disabled: transparent; - --system-spectrum-button-quiet-border-color-disabled: transparent; - --system-spectrum-button-selected-background-color-default: var( - --spectrum-neutral-background-color-default + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small ); - --system-spectrum-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-hover + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 ); - --system-spectrum-button-selected-background-color-down: var( - --spectrum-neutral-background-color-down + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 ); - --system-spectrum-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-key-focus + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-button-selected-border-color-default: transparent; - --system-spectrum-button-selected-border-color-hover: transparent; - --system-spectrum-button-selected-border-color-down: transparent; - --system-spectrum-button-selected-border-color-focus: transparent; - --system-spectrum-button-selected-content-color-default: var( - --spectrum-white + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-selected-content-color-hover: var( - --spectrum-white + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-button-selected-content-color-down: var(--spectrum-white); - --system-spectrum-button-selected-content-color-focus: var( - --spectrum-white + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-selected-border-color-disabled: transparent; - --system-spectrum-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 ); - --system-spectrum-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 ); - --system-spectrum-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 ); - --system-spectrum-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 ); - --system-spectrum-button-staticblack-quiet-border-color-default: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-button-staticblack-quiet-border-color-down: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-background-color-default: var( - --spectrum-transparent-white-800 + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-button-staticwhite-background-color-hover: var( - --spectrum-transparent-white-900 + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-button-staticwhite-background-color-down: var( - --spectrum-transparent-white-900 + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) ); - --system-spectrum-button-staticwhite-background-color-focus: var( - --spectrum-transparent-white-900 + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 ); - --system-spectrum-button-staticwhite-border-color-default: transparent; - --system-spectrum-button-staticwhite-border-color-hover: transparent; - --system-spectrum-button-staticwhite-border-color-down: transparent; - --system-spectrum-button-staticwhite-border-color-focus: transparent; - --system-spectrum-button-staticwhite-content-color-default: var( - --spectrum-black + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticwhite-content-color-hover: var( - --spectrum-black + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large ); - --system-spectrum-button-staticwhite-content-color-down: var( + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); +} + +:host, +:root { + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-vertical-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-alert-banner-neutral-background: var( + --spectrum-neutral-background-color-default + ); + --system-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); +} + +:host, +:root { + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --system-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); +} + +:host, +:root { + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); +} + +:host, +:root { + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var( + --spectrum-text-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); +} + +:host, +:root { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-border-color-disabled: transparent; + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-size-m-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); +} + +:host, +:root { + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var( + --spectrum-spacing-200 + ); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); +} + +:host, +:root { + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-dark-selected-background-color-rgb: var( + --spectrum-blue-500-rgb + ); + --system-card-darkest-selected-background-color-rgb: var( + --spectrum-blue-600-rgb + ); +} + +: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-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent + ); + --system-clear-button-over-background-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-background-color: transparent; +} + +:host, +:root { + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var( + --spectrum-white + ); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var( --spectrum-black ); - --system-spectrum-button-staticwhite-content-color-focus: var( - --spectrum-black + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); +} + +:host, +:root { + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; +} + +:host, +:root { + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-medium-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-color-area-border-radius: var( + --spectrum-color-area-border-rounding + ); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); +} + +:host, +:root { + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var( + --spectrum-color-control-track-width + ); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var( + --spectrum-color-handle-border-width + ); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); +} + +:host, +:root { + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var( + --spectrum-color-loupe-drop-shadow-y + ); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); +} + +:host, +:root { + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var( + --spectrum-field-label-to-component + ); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); +} + +:host, +:root { + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); +} + +:host, +:root { + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} + +:host, +:root { + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); +} + +:host, +:root { + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); +} + +:host, +:root { + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: '\002c'; +} + +:host, +:root { + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-l-min-height: var( + --spectrum-component-height-100 + ); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var( + --spectrum-component-height-200 + ); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var( + --spectrum-spacing-200 + ); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); +} + +:host, +:root { + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); +} + +:host, +:root { + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); +} + +:host, +:root { + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-up-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-up-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-up-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-up-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-up-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var( + --spectrum-asterisk-icon-size-75 + ); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); +} + +:host, +:root { + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-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; +} + +:host, +:root { + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); +} + +:host, +:root { + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-text-to-control) + + var(--system-menu-item-icon-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: var(--spectrum-gray-50); + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var( + --spectrum-workflow-icon-size-75 + ); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-menu-size-s-item-description-font-size: var( + --spectrum-font-size-50 + ); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var( + --spectrum-font-size-75 + ); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-icon-width: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var( + --spectrum-font-size-300 + ); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); +} + +:host, +:root { + --system-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 + ); +} + +:host, +:root { + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-width: 0px; + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); +} + +:host, +:root { + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 + ); + --system-picker-button-border-width: 0px; + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); +} + +:host, +:root { + --system-popover-border-width: 0; + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); +} + +:host, +:root { + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --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-thickness: var( + --spectrum-progress-bar-thickness-medium + ); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --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-fill-color-positive: var( + --spectrum-positive-visual-color + ); + --system-progress-bar-fill-color-notice: var( + --spectrum-notice-visual-color + ); + --system-progress-bar-fill-color-negative: var( + --spectrum-negative-visual-color + ); + --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-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-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-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-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-size-s-progressbar-thickness: var( + --spectrum-meter-thickness-small + ); + --system-meter-size-s-progressbar-size-default: var( + --system-progress-bar-size-2400 + ); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-meter-size-l-progressbar-thickness: var( + --spectrum-meter-thickness-large + ); + --system-meter-size-l-progressbar-size-default: var( + --system-progress-bar-size-2500 + ); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); +} + +:host, +:root { + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); +} + +:host, +:root { + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); +} + +:host, +:root { + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-size-s-border-radius: calc( + var(--spectrum-component-height-75) / 2 + ); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-search-size-m-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: calc( + var(--spectrum-component-height-200) / 2 + ); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: calc( + var(--spectrum-component-height-300) / 2 + ); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); +} + +:host, +:root { + --system-side-nav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 + ); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); +} + +:host, +:root { + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-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-handle-margin-left: calc( + var(--system-slider-handle-size) / -2 + ); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc( + var(--system-slider-controls-margin) * -1 + ); + --system-slider-track-middle-handleoffset: calc( + var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2 + ); + --system-slider-input-top-size: calc( + var(--system-slider-handle-size) / -2 / 4 + ); + --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-input-left: calc( + var(--system-slider-handle-margin-left) / 4 + ); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --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-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-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var( + --spectrum-slider-handle-size-large + ); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var( + --spectrum-component-height-300 + ); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; +} + +:host, +:root { + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); +} + +:host, +:root { + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-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 + ); +} + +:host, +:root { + --system-stepper-border-width: var(--spectrum-border-width-200); + --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-hover: var(--spectrum-gray-500); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: solid; + --system-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-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); +} + +:host, +:root { + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-black-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-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: 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-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); +} + +:host, +:root { + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); +} + +:host, +:root { + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; +} + +:host, +:root { + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-900 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-900 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-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); +} + +:host, +:root { + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular ); - --system-spectrum-button-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color ); - --system-spectrum-button-staticwhite-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized ); - --system-spectrum-button-staticwhite-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus ); - --system-spectrum-button-staticwhite-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-table-size-s-min-header-height: var( + --spectrum-component-height-100 ); - --system-spectrum-button-staticwhite-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small ); - --system-spectrum-button-staticwhite-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small ); - --system-spectrum-button-staticwhite-outline-border-color-default: var( - --spectrum-transparent-white-800 + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular ); - --system-spectrum-button-staticwhite-outline-border-color-hover: var( - --spectrum-transparent-white-900 + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular ); - --system-spectrum-button-staticwhite-outline-border-color-down: var( - --spectrum-transparent-white-900 + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular ); - --system-spectrum-button-staticwhite-outline-border-color-focus: var( - --spectrum-transparent-white-900 + --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-spectrum-button-staticwhite-outline-content-color-default: var( - --spectrum-white + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular ); - --system-spectrum-button-staticwhite-outline-content-color-hover: var( - --spectrum-white + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small ); - --system-spectrum-button-staticwhite-outline-content-color-down: var( - --spectrum-white + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 ); - --system-spectrum-button-staticwhite-outline-content-color-focus: var( - --spectrum-white + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 ); - --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular ); - --system-spectrum-button-staticwhite-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --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-spectrum-button-staticwhite-selected-background-color-default: var( - --spectrum-transparent-white-800 + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large ); - --system-spectrum-button-staticwhite-selected-background-color-hover: var( - --spectrum-transparent-white-900 + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large ); - --system-spectrum-button-staticwhite-selected-background-color-down: var( - --spectrum-transparent-white-900 + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular ); - --system-spectrum-button-staticwhite-selected-background-color-focus: var( - --spectrum-transparent-white-900 + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular ); - --system-spectrum-button-staticwhite-selected-content-color-default: var( - --spectrum-black + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular ); - --system-spectrum-button-staticwhite-selected-content-color-hover: var( - --spectrum-black + --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-spectrum-button-staticwhite-selected-content-color-down: var( - --spectrum-black + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular ); - --system-spectrum-button-staticwhite-selected-content-color-focus: var( - --spectrum-black + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large ); - --system-spectrum-button-staticwhite-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 ); - --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-background-color-default: var( - --spectrum-transparent-white-200 + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 ); - --system-spectrum-button-staticwhite-secondary-background-color-hover: var( - --spectrum-transparent-white-300 + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 ); - --system-spectrum-button-staticwhite-secondary-background-color-down: var( - --spectrum-transparent-white-400 + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var( + --spectrum-text-to-visual-300 + ); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); +} + +:host, +:root { + --system-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var( + --spectrum-tab-item-top-to-text-small + ); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var( + --spectrum-tab-item-top-to-text-large + ); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); +} + +:host, +:root { + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-tag-size-medium-corner-radius: var( + --spectrum-component-height-100 + ); + --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-tag-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-tag-background-color-disabled: transparent; + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --system-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --system-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-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-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-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-scope-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-scope-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-background-color-focus: var( - --spectrum-transparent-white-300 + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-default: var( - --spectrum-white + --system-scope-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-hover: var( - --spectrum-white + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-down: var( - --spectrum-white + --system-scope-tag-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-content-color-focus: var( - --spectrum-white + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-scope-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-scope-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-scope-tag-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 + --system-scope-tag-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 + --system-scope-tag-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( - --spectrum-white + --system-scope-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( - --spectrum-white + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( - --spectrum-white + --system-scope-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( - --spectrum-white + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-scope-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --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-spectrum-button-staticblack-background-color-default: var( - --spectrum-transparent-black-800 + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large ); - --system-spectrum-button-staticblack-background-color-hover: var( - --spectrum-transparent-black-900 + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-background-color-down: var( - --spectrum-transparent-black-900 + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-background-color-focus: var( - --spectrum-transparent-black-900 + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-border-color-default: transparent; - --system-spectrum-button-staticblack-border-color-hover: transparent; - --system-spectrum-button-staticblack-border-color-down: transparent; - --system-spectrum-button-staticblack-border-color-focus: transparent; - --system-spectrum-button-staticblack-content-color-default: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-content-color-hover: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-content-color-down: var( - --spectrum-white + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-content-color-focus: var( - --spectrum-white + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 ); - --system-spectrum-button-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius ); - --system-spectrum-button-staticblack-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start ); - --system-spectrum-button-staticblack-border-color-disabled: transparent; - --system-spectrum-button-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-background-color-down: var( - --spectrum-transparent-black-400 +} + +:host, +:root { + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); +} + +:host, +:root { + --system-textfield-border-color: var(--spectrum-gray-400); + --system-textfield-border-color-hover: var(--spectrum-gray-500); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-200); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 ); - --system-spectrum-button-staticblack-outline-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier ); - --system-spectrum-button-staticblack-outline-border-color-default: var( - --spectrum-transparent-black-400 + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet ); - --system-spectrum-button-staticblack-outline-border-color-hover: var( - --spectrum-transparent-black-500 + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticblack-outline-border-color-down: var( - --spectrum-transparent-black-600 + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-button-staticblack-outline-border-color-focus: var( - --spectrum-transparent-black-500 + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet ); - --system-spectrum-button-staticblack-outline-content-color-default: var( - --spectrum-black + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component ); - --system-spectrum-button-staticblack-outline-content-color-hover: var( - --spectrum-black + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component ); - --system-spectrum-button-staticblack-outline-content-color-down: var( - --spectrum-black + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet ); - --system-spectrum-button-staticblack-outline-content-color-focus: var( - --spectrum-black + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet ); - --system-spectrum-button-staticblack-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --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-spectrum-button-staticblack-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight ); - --system-spectrum-button-staticblack-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 ); - --system-spectrum-button-staticblack-secondary-background-color-default: var( - --spectrum-transparent-black-200 + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field ); - --system-spectrum-button-staticblack-secondary-background-color-hover: var( - --spectrum-transparent-black-300 + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-staticblack-secondary-background-color-down: var( - --spectrum-transparent-black-400 + --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-spectrum-button-staticblack-secondary-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover ); - --system-spectrum-button-staticblack-secondary-border-color-default: transparent; - --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; - --system-spectrum-button-staticblack-secondary-border-color-down: transparent; - --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; - --system-spectrum-button-staticblack-secondary-content-color-default: var( - --spectrum-black + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus ); - --system-spectrum-button-staticblack-secondary-content-color-hover: var( - --spectrum-black + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-content-color-down: var( - --spectrum-black + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-staticblack-secondary-content-color-focus: var( - --spectrum-black + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-staticblack-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color ); - --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default ); - --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover ); - --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus ); - --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus ); - --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color ); - --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( - --spectrum-black + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( - --spectrum-black + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( - --spectrum-black + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width ); - --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( - --spectrum-black + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height ); - --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --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-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 ); - --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 ); -} - -:host, -:root { - --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); -} - -:host, -:root { - --system-spectrum-closebutton-background-color-default: transparent; - --system-spectrum-closebutton-background-color-hover: var( - --spectrum-gray-300 + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-closebutton-background-color-down: var( - --spectrum-gray-400 + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 ); - --system-spectrum-closebutton-background-color-focus: var( - --spectrum-gray-300 + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 ); -} - -:host, -:root { - --system-spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --system-spectrum-combobox-border-color-focus-hover: var( - --spectrum-gray-800 + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small ); - --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); -} - -:host, -:root { - --system-spectrum-infieldbutton-spectrum-infield-button-border-width: 0; - --system-spectrum-infieldbutton-spectrum-infield-button-border-color: transparent; - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( - --spectrum-corner-radius-75 + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: var( - --spectrum-corner-radius-75 + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-corner-radius-75 + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-corner-radius-75 + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( - --spectrum-gray-300 + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( - --spectrum-gray-400 + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( - --spectrum-gray-300 + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small ); -} - -:host, -:root { - --system-spectrum-picker-background-color-default: var(--spectrum-gray-200); - --system-spectrum-picker-background-color-default-open: var( - --spectrum-gray-300 + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small ); - --system-spectrum-picker-background-color-active: var(--spectrum-gray-400); - --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --system-spectrum-picker-background-color-hover-open: var( - --spectrum-gray-300 + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 ); - --system-spectrum-picker-background-color-key-focus: var( - --spectrum-gray-300 + --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-spectrum-picker-border-color-default: transparent; - --system-spectrum-picker-border-color-default-open: transparent; - --system-spectrum-picker-border-color-hover: transparent; - --system-spectrum-picker-border-color-hover-open: transparent; - --system-spectrum-picker-border-color-active: transparent; - --system-spectrum-picker-border-color-key-focus: transparent; - --system-spectrum-picker-border-width: 0px; -} - -:host, -:root { - --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( - --spectrum-gray-200 + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( - --spectrum-gray-300 + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( - --spectrum-gray-400 + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( - --spectrum-gray-300 + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none; - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( - --spectrum-corner-radius-75 + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px; -} - -:host, -:root { - --system-spectrum-popover-border-width: 0; -} - -:host, -:root { - --system-spectrum-radio-button-border-color-default: var( - --spectrum-gray-800 + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-900); - --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-spectrum-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 + --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-spectrum-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); - --system-spectrum-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); - --system-spectrum-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); -} - -:host, -:root { - --system-spectrum-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); - --system-spectrum-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-border-color-default: var(--spectrum-gray-400); - --system-spectrum-search-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - --system-spectrum-search-sizes-border-radius: calc( - var(--spectrum-component-height-75) / 2 + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-sizes-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); - --system-spectrum-search-sizem-border-radius: calc( - var(--spectrum-component-height-100) / 2 + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); - --system-spectrum-search-sizem-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-search-sizel-border-radius: calc( - var(--spectrum-component-height-200) / 2 + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-search-sizel-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); - --system-spectrum-search-sizexl-border-radius: calc( - var(--spectrum-component-height-300) / 2 + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); - --system-spectrum-search-sizexl-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 ); -} - -:host, -:root { - --system-spectrum-slider-track-color: var(--spectrum-gray-200); - --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --system-spectrum-slider-ramp-track-color-disabled: var( - --spectrum-gray-200 + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --system-spectrum-slider-handle-background-color-disabled: var( - --spectrum-gray-50 + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-slider-ramp-handle-background-color: var( - --spectrum-gray-50 + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-slider-ticks-handle-background-color: var( - --spectrum-gray-50 + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --system-spectrum-slider-handle-disabled-background-color: var( - --spectrum-gray-50 + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); - --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - --system-spectrum-slider-handle-border-color-hover: var( - --spectrum-gray-900 + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); - --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-spectrum-slider-handle-border-color-key-focus: var( - --spectrum-gray-900 + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); - --system-spectrum-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); -} - -:host, -:root { - --system-spectrum-stepper-border-width: var(--spectrum-border-width-200); - --system-spectrum-stepper-buttons-border-style: solid; - --system-spectrum-stepper-buttons-border-width: var( - --spectrum-border-width-200 + --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-spectrum-stepper-buttons-border-color: transparent; - --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-spectrum-stepper-buttons-border-color-hover: transparent; - --system-spectrum-stepper-buttons-border-color-focus: transparent; - --system-spectrum-stepper-buttons-border-color-keyboard-focus: transparent; - --system-spectrum-stepper-button-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-stepper-button-border-width: 0; - --system-spectrum-stepper-border-color: var(--spectrum-gray-400); - --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-stepper-border-color-focus-hover: var( - --spectrum-gray-900 + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-stepper-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-stepper-border-color-invalid: transparent; - --system-spectrum-stepper-border-color-focus-invalid: transparent; - --system-spectrum-stepper-border-color-focus-hover-invalid: transparent; - --system-spectrum-stepper-border-color-keyboard-focus-invalid: transparent; - --system-spectrum-stepper-button-background-color-focus: var( - --spectrum-gray-400 + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 ); - --system-spectrum-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-300 + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 ); - --system-spectrum-stepper-disabled-buttons-background-color: var( - --spectrum-disabled-background-color + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large ); - --system-spectrum-stepper-disabled-buttons-border-width: 0; -} - -:host, -:root { - --system-spectrum-switch-handle-border-color-default: var( - --spectrum-gray-800 + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-hover: var( - --spectrum-gray-900 + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-spectrum-switch-handle-border-color-focus: var( - --spectrum-gray-900 + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-selected-default: var( - --spectrum-gray-800 + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-selected-hover: var( - --spectrum-gray-900 + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-selected-down: var( - --spectrum-gray-900 + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 ); - --system-spectrum-switch-handle-border-color-selected-focus: var( - --spectrum-gray-900 + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 ); -} - -:host, -:root { - --system-spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); -} - -:host, -:root { - --system-spectrum-tag-border-color: var(--spectrum-gray-300); - --system-spectrum-tag-border-color-hover: var(--spectrum-gray-400); - --system-spectrum-tag-border-color-active: var(--spectrum-gray-500); - --system-spectrum-tag-border-color-focus: var(--spectrum-gray-400); - --system-spectrum-tag-size-small-corner-radius: var( - --spectrum-component-height-75 + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large ); - --system-spectrum-tag-size-medium-corner-radius: var( - --spectrum-component-height-100 + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large ); - --system-spectrum-tag-size-large-corner-radius: var( + --system-textfield-size-l-text-area-min-block-size-quiet: var( --spectrum-component-height-200 ); - --system-spectrum-tag-background-color: transparent; - --system-spectrum-tag-background-color-hover: var(--spectrum-gray-300); - --system-spectrum-tag-background-color-active: var(--spectrum-gray-400); - --system-spectrum-tag-background-color-focus: var(--spectrum-gray-300); - --system-spectrum-tag-content-color: var( - --spectrum-neutral-content-color-default + --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-spectrum-tag-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-tag-content-color-active: var( - --spectrum-neutral-content-color-down + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-tag-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-tag-border-color-selected: var( - --spectrum-neutral-background-color-default + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 ); - --system-spectrum-tag-border-color-selected-hover: var( - --spectrum-neutral-background-color-hover + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 ); - --system-spectrum-tag-border-color-selected-active: var( - --spectrum-neutral-background-color-down + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large ); - --system-spectrum-tag-border-color-selected-focus: var( - --spectrum-neutral-background-color-key-focus + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large ); - --system-spectrum-tag-border-color-disabled: var( - --spectrum-disabled-border-color + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large ); - --system-spectrum-tag-background-color-disabled: transparent; - --system-spectrum-tag-size-small-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-75 + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large ); - --system-spectrum-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-75 + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large ); - --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-75 + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large ); - --system-spectrum-tag-size-medium-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-100 + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-100 + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 ); - --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-100 + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large ); - --system-spectrum-tag-size-large-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-200 + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large ); - --system-spectrum-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-200 + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 ); - --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-200 +} + +:host, +:root { + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-color-opacity) + ); + --system-thumbnail-layer-border-width-inner: var( + --spectrum-border-width-400 + ); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var( + --spectrum-border-width-100 + ); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-spectrum-textfield-border-color: var(--spectrum-gray-400); - --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-textfield-border-color-focus-hover: var( - --spectrum-gray-900 + --system-toast-background-color-default: var( + --spectrum-neutral-background-color-default ); - --system-spectrum-textfield-border-color-keyboard-focus: var( - --spectrum-gray-900 + --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-spectrum-textfield-border-width: var(--spectrum-border-width-200); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); } :host, :root { - --system-spectrum-toast-background-color-default: var( + --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-background-color-default ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); } :host, :root { - --system-spectrum-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-background-color-default + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); +} + +:host, +:root { + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); +} + +:host, +:root { + --system-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --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/large-vars.css b/tools/styles/tokens/express/large-vars.css index f492299100..2b61a137b6 100644 --- a/tools/styles/tokens/express/large-vars.css +++ b/tools/styles/tokens/express/large-vars.css @@ -58,4 +58,12 @@ --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; } diff --git a/tools/styles/tokens/express/light-vars.css b/tools/styles/tokens/express/light-vars.css new file mode 100644 index 0000000000..04b10578e0 --- /dev/null +++ b/tools/styles/tokens/express/light-vars.css @@ -0,0 +1,16 @@ +: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/medium-vars.css b/tools/styles/tokens/express/medium-vars.css index 38f05f7033..c2677d2479 100644 --- a/tools/styles/tokens/express/medium-vars.css +++ b/tools/styles/tokens/express/medium-vars.css @@ -58,4 +58,12 @@ --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/index.css b/tools/styles/tokens/index.css new file mode 100644 index 0000000000..9d84aeac9e --- /dev/null +++ b/tools/styles/tokens/index.css @@ -0,0 +1,3360 @@ +: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/large-vars.css b/tools/styles/tokens/large-vars.css index 0c1703ea72..7b52485a2c 100644 --- a/tools/styles/tokens/large-vars.css +++ b/tools/styles/tokens/large-vars.css @@ -354,6 +354,7 @@ --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-text-to-visual-50: 8px; --spectrum-text-to-visual-75: 9px; --spectrum-text-to-visual-100: 10px; diff --git a/tools/styles/tokens/medium-vars.css b/tools/styles/tokens/medium-vars.css index b01e2bc3e8..6a8961b90e 100644 --- a/tools/styles/tokens/medium-vars.css +++ b/tools/styles/tokens/medium-vars.css @@ -354,6 +354,7 @@ --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-text-to-visual-50: 6px; --spectrum-text-to-visual-75: 7px; --spectrum-text-to-visual-100: 8px; diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index 3b5fe4f4c7..f20b8189ad 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -5,7 +5,7 @@ --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 ); @@ -15,15 +15,8 @@ --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-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 @@ -52,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 @@ -73,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); @@ -95,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/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index 9b137abd32..95cf0a5a21 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -5,7 +5,7 @@ --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 ); @@ -15,15 +15,8 @@ --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-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 @@ -53,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 @@ -74,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); @@ -96,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/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b8cefc5400..b2b6c63ca3 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -58,8 +58,6 @@ --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; - - /* 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; diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index 05529d7727..53b88bd9b6 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -5,7 +5,7 @@ --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 ); @@ -15,15 +15,8 @@ --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-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 @@ -52,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 @@ -73,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); @@ -95,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/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 382d05f8a0..4da4c86aef 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -57,8 +57,6 @@ --spectrum-well-margin-top: var(--spectrum-spacing-75); --spectrum-well-min-width: 240px; --spectrum-well-border-radius: var(--spectrum-spacing-75); - - /* 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; diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 95815f049c..228b94e430 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -36,13 +36,11 @@ --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-rgb: 181, 209, 211; --spectrum-docs-static-black-background-color: rgba( var(--spectrum-docs-static-black-background-color-rgb) ); diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css new file mode 100644 index 0000000000..e7f6691893 --- /dev/null +++ b/tools/styles/tokens/spectrum/dark-vars.css @@ -0,0 +1,102 @@ +: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/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css new file mode 100644 index 0000000000..22469fd947 --- /dev/null +++ b/tools/styles/tokens/spectrum/darkest-vars.css @@ -0,0 +1,103 @@ +: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/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 1a4597b806..fa5c264402 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -57,1364 +57,7318 @@ --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-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 { - --system-spectrum-actionbutton-background-color-default: var( - --spectrum-gray-75 + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text ); - --system-spectrum-actionbutton-background-color-hover: var( - --spectrum-gray-200 + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator ); - --system-spectrum-actionbutton-background-color-down: var( - --spectrum-gray-300 + --system-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text ); - --system-spectrum-actionbutton-background-color-focus: var( - --spectrum-gray-200 + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-actionbutton-border-color-default: var( - --spectrum-gray-400 + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content ); - --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-actionbutton-background-color-disabled: transparent; - --system-spectrum-actionbutton-border-color-disabled: var( - --spectrum-disabled-border-color + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --system-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight ); - --system-spectrum-actionbutton-content-color-disabled: var( + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-default: transparent; - --system-spectrum-actionbutton-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color ); - --system-spectrum-actionbutton-quiet-background-color-down: var( - --spectrum-gray-300 + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-actionbutton-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-quiet-background-color-disabled: transparent; - --system-spectrum-actionbutton-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-selected-border-color-default: transparent; - --system-spectrum-actionbutton-selected-border-color-hover: transparent; - --system-spectrum-actionbutton-selected-border-color-down: transparent; - --system-spectrum-actionbutton-selected-border-color-focus: transparent; - --system-spectrum-actionbutton-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 ); - --system-spectrum-actionbutton-selected-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-background-color-default: transparent; - --system-spectrum-actionbutton-staticblack-background-color-hover: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticblack-background-color-down: var( - --spectrum-transparent-black-400 + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-actionbutton-staticblack-background-color-focus: var( - --spectrum-transparent-black-300 + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-actionbutton-staticblack-border-color-default: var( - --spectrum-transparent-black-400 + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs ); - --system-spectrum-actionbutton-staticblack-border-color-hover: var( - --spectrum-transparent-black-500 + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-border-color-down: var( - --spectrum-transparent-black-600 + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small ); - --system-spectrum-actionbutton-staticblack-border-color-focus: var( - --spectrum-transparent-black-500 + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-content-color-default: var( - --spectrum-black + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticblack-content-color-hover: var( - --spectrum-black + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-content-color-down: var( - --spectrum-black + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-actionbutton-staticblack-content-color-focus: var( - --spectrum-black + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-actionbutton-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var( + --spectrum-body-size-s ); - --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticblack-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-black-800 + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-black-900 + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-black-900 + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-black-900 + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( - --spectrum-white + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( - --spectrum-white + --system-accordion-size-l-item-content-font-size: var( + --spectrum-body-size-m ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( - --spectrum-white + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( - --spectrum-white + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-accordion-size-xl-item-height: var( + --spectrum-component-height-400 ); - --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; - --system-spectrum-actionbutton-staticwhite-background-color-hover: var( - --spectrum-transparent-white-300 + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 ); - --system-spectrum-actionbutton-staticwhite-background-color-down: var( - --spectrum-transparent-white-400 + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-actionbutton-staticwhite-background-color-focus: var( - --spectrum-transparent-white-300 + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 ); - --system-spectrum-actionbutton-staticwhite-border-color-default: var( - --spectrum-transparent-white-400 + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l ); - --system-spectrum-actionbutton-staticwhite-border-color-hover: var( - --spectrum-transparent-white-500 + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-border-color-down: var( - --spectrum-transparent-white-600 + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large ); - --system-spectrum-actionbutton-staticwhite-border-color-focus: var( - --spectrum-transparent-white-500 + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 ); - --system-spectrum-actionbutton-staticwhite-content-color-default: var( - --spectrum-white + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-content-color-hover: var( - --spectrum-white + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small ); - --system-spectrum-actionbutton-staticwhite-content-color-down: var( - --spectrum-white + --system-accordion-compact-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-content-color-focus: var( - --spectrum-white + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 ); - --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent; - --system-spectrum-actionbutton-staticwhite-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default: var( - --spectrum-transparent-white-800 + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( - --spectrum-transparent-white-900 + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( - --spectrum-black + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( - --spectrum-black + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( - --spectrum-black + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( - --spectrum-black + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large ); - --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; -} - -:host, -:root { - --system-spectrum-actiongroup-gap-size-compact: 0; - --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; - --system-spectrum-actiongroup-vertical-spacing-compact: -1px; } :host, :root { - --system-spectrum-alertbanner-spectrum-alert-banner-netural-background: var( - --spectrum-neutral-subdued-background-color-default + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var( + --spectrum-line-height-100 + ); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-spectrum-button-background-color-default: var(--spectrum-gray-75); - --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); - --system-spectrum-button-background-color-down: var(--spectrum-gray-300); - --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); - --system-spectrum-button-border-color-default: var(--spectrum-gray-400); - --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); - --system-spectrum-button-border-color-down: var(--spectrum-gray-600); - --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-button-content-color-default: var( + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( --spectrum-neutral-content-color-default ); - --system-spectrum-button-content-color-hover: var( + --system-action-button-content-color-hover: var( --spectrum-neutral-content-color-hover ); - --system-spectrum-button-content-color-down: var( + --system-action-button-content-color-down: var( --spectrum-neutral-content-color-down ); - --system-spectrum-button-content-color-focus: var( + --system-action-button-content-color-focus: var( --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-background-color-disabled: transparent; - --system-spectrum-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-spectrum-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-spectrum-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-spectrum-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-spectrum-button-accent-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap ); - --system-spectrum-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-accent-border-color-default: transparent; - --system-spectrum-button-accent-border-color-hover: transparent; - --system-spectrum-button-accent-border-color-down: transparent; - --system-spectrum-button-accent-border-color-focus: transparent; - --system-spectrum-button-accent-content-color-default: var( - --spectrum-white + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); - --system-spectrum-button-accent-content-color-down: var(--spectrum-white); - --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); - --system-spectrum-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-spectrum-button-accent-border-color-disabled: transparent; - --system-spectrum-button-accent-content-color-disabled: var( + --system-action-button-content-color-disabled: var( --spectrum-disabled-content-color ); - --system-spectrum-button-accent-outline-background-color-default: transparent; - --system-spectrum-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var( + --spectrum-gray-200 ); - --system-spectrum-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 + --system-action-button-quiet-background-color-down: var( + --spectrum-gray-300 ); - --system-spectrum-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 + --system-action-button-quiet-background-color-focus: var( + --spectrum-gray-200 ); - --system-spectrum-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default ); - --system-spectrum-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover ); - --system-spectrum-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down ); - --system-spectrum-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus ); - --system-spectrum-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus + --system-action-button-selected-content-color-hover: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-background-color-disabled: transparent; - --system-spectrum-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var( + --spectrum-gray-50 ); - --system-spectrum-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-negative-background-color-default: var( - --spectrum-negative-background-color-default + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default ); - --system-spectrum-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover ); - --system-spectrum-button-negative-background-color-down: var( - --spectrum-negative-background-color-down + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down ); - --system-spectrum-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus ); - --system-spectrum-button-negative-border-color-default: transparent; - --system-spectrum-button-negative-border-color-hover: transparent; - --system-spectrum-button-negative-border-color-down: transparent; - --system-spectrum-button-negative-border-color-focus: transparent; - --system-spectrum-button-negative-content-color-default: var( + --system-action-button-selected-emphasized-content-color-default: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-hover: var( + --system-action-button-selected-emphasized-content-color-hover: var( --spectrum-white ); - --system-spectrum-button-negative-content-color-down: var(--spectrum-white); - --system-spectrum-button-negative-content-color-focus: var( + --system-action-button-selected-emphasized-content-color-down: var( --spectrum-white ); - --system-spectrum-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white ); - --system-spectrum-button-negative-border-color-disabled: transparent; - --system-spectrum-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 ); - --system-spectrum-button-negative-outline-background-color-default: transparent; - --system-spectrum-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 ); - --system-spectrum-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 ); - --system-spectrum-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-400 ); - --system-spectrum-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-500 ); - --system-spectrum-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-600 ); - --system-spectrum-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-500 ); - --system-spectrum-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color ); - --system-spectrum-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default + --system-action-button-static-black-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover + --system-action-button-static-black-content-color-hover: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down + --system-action-button-static-black-content-color-down: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus + --system-action-button-static-black-content-color-focus: var( + --spectrum-black ); - --system-spectrum-button-negative-outline-background-color-disabled: transparent; - --system-spectrum-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color ); - --system-spectrum-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color ); - --system-spectrum-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 ); - --system-spectrum-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-border-color-default: transparent; - --system-spectrum-button-primary-border-color-hover: transparent; - --system-spectrum-button-primary-border-color-down: transparent; - --system-spectrum-button-primary-border-color-focus: transparent; - --system-spectrum-button-primary-content-color-default: var( - --spectrum-white + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 ); - --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); - --system-spectrum-button-primary-content-color-down: var(--spectrum-white); - --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); - --system-spectrum-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white ); - --system-spectrum-button-primary-border-color-disabled: transparent; - --system-spectrum-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 ); - --system-spectrum-button-primary-outline-background-color-default: transparent; - --system-spectrum-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 ); - --system-spectrum-button-primary-outline-border-color-default: var( - --spectrum-gray-800 + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-primary-outline-border-color-hover: var( + --system-action-button-static-black-selected-emphasized-content-color-hover: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-down: var( + --system-action-button-static-black-selected-emphasized-content-color-down: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-border-color-focus: var( + --system-action-button-static-black-selected-emphasized-content-color-focus: var( --spectrum-gray-900 ); - --system-spectrum-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 ); - --system-spectrum-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 ); - --system-spectrum-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 ); - --system-spectrum-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-400 ); - --system-spectrum-button-primary-outline-background-color-disabled: transparent; - --system-spectrum-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-500 ); - --system-spectrum-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-600 ); - --system-spectrum-button-secondary-background-color-default: var( - --spectrum-gray-200 + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-500 ); - --system-spectrum-button-secondary-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color ); - --system-spectrum-button-secondary-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-content-color-default: var( + --spectrum-white ); - --system-spectrum-button-secondary-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-content-color-hover: var( + --spectrum-white ); - --system-spectrum-button-secondary-border-color-default: transparent; - --system-spectrum-button-secondary-border-color-hover: transparent; - --system-spectrum-button-secondary-border-color-down: transparent; - --system-spectrum-button-secondary-border-color-focus: transparent; - --system-spectrum-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-content-color-down: var( + --spectrum-white ); - --system-spectrum-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-content-color-focus: var( + --spectrum-white ); - --system-spectrum-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color ); - --system-spectrum-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color ); - --system-spectrum-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 ); - --system-spectrum-button-secondary-border-color-disabled: transparent; - --system-spectrum-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-background-color-default: transparent; - --system-spectrum-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 ); - --system-spectrum-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black ); - --system-spectrum-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 ); - --system-spectrum-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 ); - --system-spectrum-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 ); - --system-spectrum-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) ); - --system-spectrum-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 ); - --system-spectrum-button-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 ); - --system-spectrum-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small ); - --system-spectrum-button-quiet-background-color-default: transparent; - --system-spectrum-button-quiet-background-color-hover: var( - --spectrum-gray-200 + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 ); - --system-spectrum-button-quiet-background-color-down: var( - --spectrum-gray-300 + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 ); - --system-spectrum-button-quiet-background-color-focus: var( - --spectrum-gray-200 + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 ); - --system-spectrum-button-quiet-border-color-default: transparent; - --system-spectrum-button-quiet-border-color-hover: transparent; - --system-spectrum-button-quiet-border-color-down: transparent; - --system-spectrum-button-quiet-border-color-focus: transparent; - --system-spectrum-button-quiet-background-color-disabled: transparent; - --system-spectrum-button-quiet-border-color-disabled: transparent; - --system-spectrum-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) ); - --system-spectrum-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 ); - --system-spectrum-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 ); - --system-spectrum-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small ); - --system-spectrum-button-selected-border-color-default: transparent; - --system-spectrum-button-selected-border-color-hover: transparent; - --system-spectrum-button-selected-border-color-down: transparent; - --system-spectrum-button-selected-border-color-focus: transparent; - --system-spectrum-button-selected-content-color-default: var( - --spectrum-white + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 ); - --system-spectrum-button-selected-content-color-hover: var( - --spectrum-white + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 ); - --system-spectrum-button-selected-content-color-down: var(--spectrum-white); - --system-spectrum-button-selected-content-color-focus: var( - --spectrum-white + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) ); - --system-spectrum-button-selected-border-color-disabled: transparent; - --system-spectrum-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium ); - --system-spectrum-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); +} + +:host, +:root { + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-alert-banner-min-height: var( + --spectrum-alert-banner-minimum-height + ); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); +} + +:host, +:root { + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var( + --spectrum-notice-visual-color + ); + --system-alert-dialog-error-icon-color: var( + --spectrum-negative-visual-color + ); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var( + --spectrum-heading-line-height + ); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); +} + +:host, +:root { + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); +} + +:host, +:root { + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var( + --spectrum-text-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); +} + +:host, +:root { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var( + --spectrum-button-top-to-text-small + ); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-size-m-top-to-text: var( + --spectrum-button-top-to-text-medium + ); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var( + --spectrum-button-top-to-text-large + ); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); +} + +:host, +:root { + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var( + --spectrum-spacing-200 + ); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-m-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var( + --spectrum-spacing-300 + ); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); +} + +:host, +:root { + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-compact-current: var( + --spectrum-font-size-100 + ); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var( + --spectrum-text-underline-gap + ); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var( + --spectrum-breadcrumbs-end-edge-to-text + ); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var( + --spectrum-accent-color-900 + ); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); +} + +:host, +:root { + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --system-card-preview-background-color: var( + --spectrum-background-base-color + ); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-dark-selected-background-color-rgb: var( + --spectrum-blue-500-rgb + ); + --system-card-darkest-selected-background-color-rgb: var( + --spectrum-blue-600-rgb + ); +} + +:host, +:root { + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent + ); + --system-clear-button-quiet-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent + ); + --system-clear-button-quiet-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent + ); + --system-clear-button-quiet-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent + ); + --system-clear-button-over-background-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) + ); + --system-clear-button-over-background-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent + ); + --system-clear-button-over-background-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --system-clear-button-disabled-background-color: transparent; +} + +:host, +:root { + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var( + --spectrum-white + ); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var( + --spectrum-black + ); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); +} + +:host, +:root { + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; +} + +:host, +:root { + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-medium-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); +} + +:host, +:root { + --system-color-area-border-radius: var( + --spectrum-color-area-border-rounding + ); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); +} + +:host, +:root { + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var( + --spectrum-color-control-track-width + ); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var( + --spectrum-color-handle-border-width + ); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); +} + +:host, +:root { + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var( + --spectrum-color-loupe-drop-shadow-y + ); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); +} + +:host, +:root { + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); +} + +:host, +:root { + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var( + --spectrum-field-label-to-component + ); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); +} + +:host, +:root { + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); +} + +:host, +:root { + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var( + --spectrum-spacing-600 + ); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); +} + +:host, +:root { + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); +} + +:host, +:root { + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); +} + +:host, +:root { + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: '\002c'; +} + +:host, +:root { + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-l-min-height: var( + --spectrum-component-height-100 + ); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var( + --spectrum-component-height-200 + ); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var( + --spectrum-spacing-200 + ); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); +} + +:host, +:root { + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); +} + +:host, +:root { + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); +} + +:host, +:root { + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var( + --spectrum-arrow-icon-size-75 + ); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-up-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-up-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-up-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-up-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-up-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var( + --spectrum-asterisk-icon-size-75 + ); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); +} + +:host, +:root { + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-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; +} + +:host, +:root { + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); +} + +:host, +:root { + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var( + --spectrum-accent-color-900 + ); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-text-to-control) + + var(--system-menu-item-icon-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: var(--spectrum-gray-50); + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var( + --spectrum-workflow-icon-size-75 + ); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var( + --spectrum-text-to-control-75 + ); + --system-menu-size-s-item-description-font-size: var( + --spectrum-font-size-50 + ); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var( + --spectrum-workflow-icon-size-100 + ); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var( + --spectrum-font-size-75 + ); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-icon-width: var( + --spectrum-workflow-icon-size-200 + ); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var( + --spectrum-font-size-300 + ); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); +} + +:host, +:root { + --system-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 + ); +} + +:host, +:root { + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); +} + +:host, +:root { + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); +} + +:host, +:root { + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / + 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); +} + +:host, +:root { + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --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-thickness: var( + --spectrum-progress-bar-thickness-medium + ); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --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-fill-color-positive: var( + --spectrum-positive-visual-color + ); + --system-progress-bar-fill-color-notice: var( + --spectrum-notice-visual-color + ); + --system-progress-bar-fill-color-negative: var( + --spectrum-negative-visual-color + ); + --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-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-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-m-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-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-size-s-progressbar-thickness: var( + --spectrum-meter-thickness-small + ); + --system-meter-size-s-progressbar-size-default: var( + --system-progress-bar-size-2400 + ); + --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-meter-size-l-progressbar-thickness: var( + --spectrum-meter-thickness-large + ); + --system-meter-size-l-progressbar-size-default: var( + --system-progress-bar-size-2500 + ); + --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-progressbar-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); +} + +:host, +:root { + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); +} + +:host, +:root { + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-radio-disabled-border-color: var( + --spectrum-disabled-content-color + ); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); +} + +:host, +:root { + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); +} + +:host, +:root { + --system-side-nav-focus-ring-size: var( + --spectrum-focus-indicator-thickness + ); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var( + --spectrum-component-edge-to-text-100 + ); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var( + --spectrum-gray-200 + ); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); +} + +:host, +:root { + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-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-handle-margin-left: calc( + var(--system-slider-handle-size) / -2 + ); + --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); + --system-slider-track-margin-offset: calc( + var(--system-slider-controls-margin) * -1 + ); + --system-slider-track-middle-handleoffset: calc( + var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2 + ); + --system-slider-input-top-size: calc( + var(--system-slider-handle-size) / -2 / 4 + ); + --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-input-left: calc( + var(--system-slider-handle-margin-left) / 4 + ); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --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-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-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var( + --spectrum-slider-handle-size-large + ); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var( + --spectrum-component-height-300 + ); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; +} + +:host, +:root { + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); +} + +:host, +:root { + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-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 + ); +} + +:host, +:root { + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-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); +} + +:host, +:root { + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-black-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-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: 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-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); +} + +:host, +:root { + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); +} + +:host, +:root { + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; +} + +:host, +:root { + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-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); +} + +:host, +:root { + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var( + --spectrum-table-selected-row-background-opacity-non-emphasized-hover + ) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 ); - --system-spectrum-button-staticblack-quiet-border-color-default: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; - --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; - --system-spectrum-button-staticblack-quiet-border-color-down: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; - --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; - --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-background-color-default: var( - --spectrum-transparent-white-800 + --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-spectrum-button-staticwhite-background-color-hover: var( - --spectrum-transparent-white-900 + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color ); - --system-spectrum-button-staticwhite-background-color-down: var( - --spectrum-transparent-white-900 + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized ); - --system-spectrum-button-staticwhite-background-color-focus: var( - --spectrum-transparent-white-900 + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus ); - --system-spectrum-button-staticwhite-border-color-default: transparent; - --system-spectrum-button-staticwhite-border-color-hover: transparent; - --system-spectrum-button-staticwhite-border-color-down: transparent; - --system-spectrum-button-staticwhite-border-color-focus: transparent; - --system-spectrum-button-staticwhite-content-color-default: var( - --spectrum-black + --system-table-size-s-min-header-height: var( + --spectrum-component-height-100 ); - --system-spectrum-button-staticwhite-content-color-hover: var( - --spectrum-black + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small ); - --system-spectrum-button-staticwhite-content-color-down: var( - --spectrum-black + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small ); - --system-spectrum-button-staticwhite-content-color-focus: var( - --spectrum-black + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular ); - --system-spectrum-button-staticwhite-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular ); - --system-spectrum-button-staticwhite-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular ); - --system-spectrum-button-staticwhite-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --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-spectrum-button-staticwhite-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular ); - --system-spectrum-button-staticwhite-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small ); - --system-spectrum-button-staticwhite-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 ); - --system-spectrum-button-staticwhite-outline-border-color-default: var( - --spectrum-transparent-white-800 + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-button-staticwhite-outline-border-color-hover: var( - --spectrum-transparent-white-900 + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 ); - --system-spectrum-button-staticwhite-outline-border-color-down: var( - --spectrum-transparent-white-900 + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular ); - --system-spectrum-button-staticwhite-outline-border-color-focus: var( - --spectrum-transparent-white-900 + --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-spectrum-button-staticwhite-outline-content-color-default: var( - --spectrum-white + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large ); - --system-spectrum-button-staticwhite-outline-content-color-hover: var( - --spectrum-white + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large ); - --system-spectrum-button-staticwhite-outline-content-color-down: var( - --spectrum-white + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular ); - --system-spectrum-button-staticwhite-outline-content-color-focus: var( - --spectrum-white + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular ); - --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular ); - --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --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-spectrum-button-staticwhite-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular ); - --system-spectrum-button-staticwhite-selected-background-color-default: var( - --spectrum-transparent-white-800 + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large ); - --system-spectrum-button-staticwhite-selected-background-color-hover: var( - --spectrum-transparent-white-900 + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 ); - --system-spectrum-button-staticwhite-selected-background-color-down: var( - --spectrum-transparent-white-900 + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 ); - --system-spectrum-button-staticwhite-selected-background-color-focus: var( - --spectrum-transparent-white-900 + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 ); - --system-spectrum-button-staticwhite-selected-content-color-default: var( - --spectrum-black + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular ); - --system-spectrum-button-staticwhite-selected-content-color-hover: var( - --spectrum-black + --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-spectrum-button-staticwhite-selected-content-color-down: var( - --spectrum-black + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large ); - --system-spectrum-button-staticwhite-selected-content-color-focus: var( - --spectrum-black + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large ); - --system-spectrum-button-staticwhite-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular ); - --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-background-color-default: var( - --spectrum-transparent-white-200 + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular ); - --system-spectrum-button-staticwhite-secondary-background-color-hover: var( - --spectrum-transparent-white-300 + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular ); - --system-spectrum-button-staticwhite-secondary-background-color-down: var( - --spectrum-transparent-white-400 + --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-spectrum-button-staticwhite-secondary-background-color-focus: var( - --spectrum-transparent-white-300 + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular ); - --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; - --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-default: var( - --spectrum-white + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large ); - --system-spectrum-button-staticwhite-secondary-content-color-hover: var( - --spectrum-white + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 ); - --system-spectrum-button-staticwhite-secondary-content-color-down: var( - --spectrum-white + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 ); - --system-spectrum-button-staticwhite-secondary-content-color-focus: var( - --spectrum-white + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var( + --spectrum-text-to-visual-300 + ); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); +} + +:host, +:root { + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-medium + ); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var( + --spectrum-tab-item-top-to-text-small + ); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var( + --spectrum-tab-item-top-to-text-large + ); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); +} + +:host, +:root { + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-75); + --system-tag-background-color-hover: var(--spectrum-gray-75); + --system-tag-background-color-active: var(--spectrum-gray-200); + --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var( + --spectrum-negative-color-1000 + ); + --system-tag-border-color-invalid-active: var( + --spectrum-negative-color-1100 + ); + --system-tag-border-color-invalid-focus: var( + --spectrum-negative-color-1000 + ); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-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-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-scope-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-scope-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-scope-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-spectrum-button-staticwhite-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-scope-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 ); - --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-scope-tag-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 + --system-scope-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 + --system-scope-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 + --system-scope-tag-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( - --spectrum-white + --system-scope-tag-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( - --spectrum-white + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( - --spectrum-white + --system-scope-tag-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( - --spectrum-white + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius ); - --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color + --system-scope-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start ); - --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color + --system-scope-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticblack-background-color-default: var( - --spectrum-transparent-black-800 + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end ); - --system-spectrum-button-staticblack-background-color-hover: var( - --spectrum-transparent-black-900 + --system-scope-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-background-color-down: var( - --spectrum-transparent-black-900 + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-background-color-focus: var( - --spectrum-transparent-black-900 + --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-spectrum-button-staticblack-border-color-default: transparent; - --system-spectrum-button-staticblack-border-color-hover: transparent; - --system-spectrum-button-staticblack-border-color-down: transparent; - --system-spectrum-button-staticblack-border-color-focus: transparent; - --system-spectrum-button-staticblack-content-color-default: var( - --spectrum-white + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large ); - --system-spectrum-button-staticblack-content-color-hover: var( - --spectrum-white + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-content-color-down: var( - --spectrum-white + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 ); - --system-spectrum-button-staticblack-content-color-focus: var( - --spectrum-white + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large ); - --system-spectrum-button-staticblack-border-color-disabled: transparent; - --system-spectrum-button-staticblack-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 ); - --system-spectrum-button-staticblack-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 ); - --system-spectrum-button-staticblack-outline-background-color-down: var( - --spectrum-transparent-black-400 + --system-tag-size-l-corner-radius: var( + --system-tag-size-large-corner-radius ); - --system-spectrum-button-staticblack-outline-background-color-focus: var( - --spectrum-transparent-black-300 + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start ); - --system-spectrum-button-staticblack-outline-border-color-default: var( - --spectrum-transparent-black-400 + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-border-color-hover: var( - --spectrum-transparent-black-500 + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end ); - --system-spectrum-button-staticblack-outline-border-color-down: var( - --spectrum-transparent-black-600 +} + +:host, +:root { + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); +} + +:host, +:root { + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 ); - --system-spectrum-button-staticblack-outline-border-color-focus: var( - --spectrum-transparent-black-500 + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier ); - --system-spectrum-button-staticblack-outline-content-color-default: var( - --spectrum-black + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet ); - --system-spectrum-button-staticblack-outline-content-color-hover: var( - --spectrum-black + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 ); - --system-spectrum-button-staticblack-outline-content-color-down: var( - --spectrum-black + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-button-staticblack-outline-content-color-focus: var( - --spectrum-black + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet ); - --system-spectrum-button-staticblack-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component ); - --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component ); - --system-spectrum-button-staticblack-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet ); - --system-spectrum-button-staticblack-secondary-background-color-default: var( - --spectrum-transparent-black-200 + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet ); - --system-spectrum-button-staticblack-secondary-background-color-hover: var( - --spectrum-transparent-black-300 + --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-spectrum-button-staticblack-secondary-background-color-down: var( - --spectrum-transparent-black-400 + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight ); - --system-spectrum-button-staticblack-secondary-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 ); - --system-spectrum-button-staticblack-secondary-border-color-default: transparent; - --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; - --system-spectrum-button-staticblack-secondary-border-color-down: transparent; - --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; - --system-spectrum-button-staticblack-secondary-content-color-default: var( - --spectrum-black + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field ); - --system-spectrum-button-staticblack-secondary-content-color-hover: var( - --spectrum-black + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-button-staticblack-secondary-content-color-down: var( - --spectrum-black + --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-spectrum-button-staticblack-secondary-content-color-focus: var( - --spectrum-black + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover ); - --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus ); - --system-spectrum-button-staticblack-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus ); - --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; - --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color ); - --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color ); - --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color ); - --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default ); - --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover ); - --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus ); - --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( - --spectrum-black + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover ); - --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( - --spectrum-black + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus ); - --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( - --spectrum-black + --system-textfield-icon-color-invalid: var( + --spectrum-negative-visual-color ); - --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( - --spectrum-black + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default ); - --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; - --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color ); - --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width ); -} - -:host, -:root { - --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); -} - -:host, -:root { - --system-spectrum-closebutton-background-color-default: transparent; - --system-spectrum-closebutton-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height ); - --system-spectrum-closebutton-background-color-down: var( - --spectrum-gray-300 + --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-spectrum-closebutton-background-color-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 ); -} - -:host, -:root { - --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --system-spectrum-combobox-border-color-focus-hover: var( - --spectrum-gray-600 + --system-textfield-size-s-placeholder-font-size: var( + --spectrum-font-size-75 ); - --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); -} - -:host, -:root { - --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( - --spectrum-border-width-100 + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-infield-button-border-radius-reset + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 ); - --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-infield-button-border-radius-reset + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( - --spectrum-gray-75 + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( - --spectrum-gray-300 + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small ); - --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small ); -} - -:host, -:root { - --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); - --system-spectrum-picker-background-color-default-open: var( - --spectrum-gray-200 + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small ); - --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); - --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --system-spectrum-picker-background-color-hover-open: var( - --spectrum-gray-200 + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 ); - --system-spectrum-picker-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); - --system-spectrum-picker-border-color-default-open: var( - --spectrum-gray-500 + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small ); - --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); - --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-spectrum-picker-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( - --spectrum-gray-75 + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( - --spectrum-gray-200 + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 ); - --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( - --spectrum-gray-300 + --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-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( - --spectrum-gray-200 + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; - --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; - --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( - --spectrum-border-width-100 + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); -} - -:host, -:root { - --system-spectrum-popover-border-width: var(--spectrum-border-width-100); -} - -:host, -:root { - --system-spectrum-radio-button-border-color-default: var( - --spectrum-gray-600 + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 ); - --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-spectrum-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 + --system-textfield-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 ); - --system-spectrum-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 + --system-textfield-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); - --system-spectrum-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 ); -} - -:host, -:root { - --system-spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --system-spectrum-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-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-spectrum-search-border-color-default: var(--spectrum-gray-500); - --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - --system-spectrum-search-sizes-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); - --system-spectrum-search-sizes-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium ); - --system-spectrum-search-sizem-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); - --system-spectrum-search-sizem-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium ); - --system-spectrum-search-sizel-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-sizel-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium ); - --system-spectrum-search-sizexl-border-radius: var( - --spectrum-corner-radius-100 + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); - --system-spectrum-search-sizexl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium ); -} - -:host, -:root { - --system-spectrum-slider-track-color: var(--spectrum-gray-300); - --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --system-spectrum-slider-ramp-track-color-disabled: var( - --spectrum-gray-200 + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-slider-handle-background-color: transparent; - --system-spectrum-slider-handle-background-color-disabled: transparent; - --system-spectrum-slider-ramp-handle-background-color: var( - --spectrum-gray-100 + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium ); - --system-spectrum-slider-ticks-handle-background-color: var( - --spectrum-gray-100 + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); - --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --system-spectrum-slider-handle-disabled-background-color: var( - --spectrum-gray-100 + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium ); - --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --system-spectrum-slider-handle-border-color-hover: var( - --spectrum-gray-800 + --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-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-spectrum-slider-handle-border-color-key-focus: var( - --spectrum-gray-800 + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); - --system-spectrum-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 ); -} - -:host, -:root { - --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); - --system-spectrum-stepper-buttons-border-style: none; - --system-spectrum-stepper-buttons-border-width: 0; - --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-spectrum-stepper-buttons-border-color-hover: var( - --spectrum-gray-600 + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-stepper-buttons-border-color-focus: var( - --spectrum-gray-800 + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium ); - --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); - --system-spectrum-stepper-button-border-radius-reset: 0px; - --system-spectrum-stepper-button-border-width: var( - --spectrum-border-width-100 + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium ); - --system-spectrum-stepper-border-color: var(--spectrum-gray-500); - --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-stepper-border-color-focus-hover: var( - --spectrum-gray-800 + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); - --system-spectrum-stepper-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 ); - --system-spectrum-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default + --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-spectrum-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-stepper-button-background-color-focus: var( - --spectrum-gray-300 + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 ); - --system-spectrum-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 ); -} - -:host, -:root { - --system-spectrum-switch-handle-border-color-default: var( - --spectrum-gray-600 + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-hover: var( - --spectrum-gray-700 + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-spectrum-switch-handle-border-color-focus: var( - --spectrum-gray-700 + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large ); - --system-spectrum-switch-handle-border-color-selected-down: var( - --spectrum-gray-900 + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large ); - --system-spectrum-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 ); -} - -:host, -:root { - --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); -} - -:host, -:root { - --system-spectrum-tag-border-color: var(--spectrum-gray-700); - --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); - --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-tag-size-small-corner-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 ); - --system-spectrum-tag-size-medium-corner-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large ); - --system-spectrum-tag-size-large-corner-radius: var( - --spectrum-corner-radius-100 + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large ); - --system-spectrum-tag-background-color: var(--spectrum-gray-75); - --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); - --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); - --system-spectrum-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 ); - --system-spectrum-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover + --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-spectrum-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 ); - --system-spectrum-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 ); - --system-spectrum-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 ); - --system-spectrum-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 ); - --system-spectrum-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 ); - --system-spectrum-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large ); - --system-spectrum-tag-border-color-disabled: transparent; - --system-spectrum-tag-background-color-disabled: var( - --spectrum-disabled-background-color + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large ); - --system-spectrum-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large ); - --system-spectrum-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large ); - --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large ); - --system-spectrum-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large ); - --system-spectrum-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 ); - --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 ); - --system-spectrum-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large ); - --system-spectrum-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large ); - --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 ); } :host, :root { - --system-spectrum-textfield-border-color: var(--spectrum-gray-500); - --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --system-spectrum-textfield-border-color-focus-hover: var( - --spectrum-gray-900 + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-color-opacity) + ); + --system-thumbnail-layer-border-width-inner: var( + --spectrum-border-width-400 + ); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var( + --spectrum-border-width-100 ); - --system-spectrum-textfield-border-color-keyboard-focus: var( - --spectrum-gray-900 + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness ); - --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-spectrum-toast-background-color-default: var( + --system-toast-background-color-default: var( --spectrum-neutral-subdued-background-color-default ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); } :host, :root { - --system-spectrum-tooltip-backgound-color-default-neutral: var( + --system-tooltip-backgound-color-default-neutral: var( --spectrum-neutral-subdued-background-color-default ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); +} + +:host, +:root { + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); +} + +:host, +:root { + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); +} + +:host, +:root { + --system-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --system-font-family: var(--spectrum-sans-font-family-stack); + --system-font-style: var(--spectrum-default-font-style); + --system-font-size: var(--spectrum-font-size-100); + --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/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index 4ead7c8208..f63d46216e 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -48,4 +48,112 @@ --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-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; } diff --git a/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css new file mode 100644 index 0000000000..423a2abd73 --- /dev/null +++ b/tools/styles/tokens/spectrum/light-vars.css @@ -0,0 +1,102 @@ +: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/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index aa8488c3c2..2e813d2af1 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -48,4 +48,113 @@ --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-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/typography.css b/tools/styles/typography.css index fe3ef2ff53..ddddc8536d 100644 --- a/tools/styles/typography.css +++ b/tools/styles/typography.css @@ -1,37 +1,18 @@ -:root, -:host { - --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-Typography { font-family: var(--spectrum-font-family); font-style: var(--spectrum-font-style); font-size: var(--spectrum-font-size); } -.spectrum:lang(ar) { +.spectrum-Typography:lang(ar) { font-family: var(--spectrum-font-family-ar); } -.spectrum:lang(he) { +.spectrum-Typography:lang(he) { font-family: var(--spectrum-font-family-he); } -.spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-heading-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-heading-font-color: var(--spectrum-heading-color); +.spectrum-Typography .spectrum-Heading { --spectrum-heading-margin-start: calc( var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier) @@ -42,44 +23,22 @@ ); } -.spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); -} - -.spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); -} - -.spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); -} - -.spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--spectrum-heading-size-m); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); -} - -.spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--spectrum-heading-size-l); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); -} - -.spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); -} - -.spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); +.spectrum-Typography .spectrum-Body { + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } -.spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); +.spectrum-Typography .spectrum-Detail { + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } .spectrum-Heading { @@ -104,7 +63,14 @@ --mod-heading-line-height, var(--spectrum-heading-line-height) ); - margin-block: 0; + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, @@ -604,59 +570,6 @@ ); } -.spectrum-Typography .spectrum-Heading { - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end) - ); -} - -.spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-body-margin: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); - --spectrum-body-font-color: var(--spectrum-body-color); -} - -.spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); -} - -.spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); -} - -.spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); -} - -.spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); -} - -.spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); -} - -.spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); -} - -.spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); -} - .spectrum-Body { font-family: var( --mod-body-sans-serif-font-family, @@ -676,7 +589,14 @@ var(--mod-body-font-color, var(--spectrum-body-font-color)) ); line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block: 0; + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, @@ -844,45 +764,6 @@ ); } -.spectrum-Typography .spectrum-Body { - margin-block-end: var(--mod-body-margin, var(--spectrum-body-margin)); -} - -.spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --spectrum-detail-serif-font-family: var( - --spectrum-serif-font-family-stack - ); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); - --spectrum-detail-font-color: var(--spectrum-detail-color); -} - -.spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); -} - -.spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); -} - -.spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); -} - -.spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); -} - .spectrum-Detail { font-family: var( --mod-detail-sans-serif-font-family, @@ -910,7 +791,14 @@ var(--spectrum-detail-letter-spacing) ); text-transform: uppercase; - margin-block: 0; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, @@ -1232,43 +1120,6 @@ ); } -.spectrum-Typography .spectrum-Detail { - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end) - ); -} - -.spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); -} - -.spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); -} - -.spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); -} - -.spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); -} - -.spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); -} - -.spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); -} - .spectrum-Code { font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); @@ -1279,7 +1130,14 @@ --highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color)) ); - margin-block: 0; + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, @@ -1394,3 +1252,176 @@ var(--spectrum-code-cjk-strong-emphasized-font-weight) ); } + +:root, +:host { + --spectrum-font-family-ar: var(--system-font-family-ar); + --spectrum-font-family-he: var(--system-font-family-he); + --spectrum-font-family: var(--system-font-family); + --spectrum-font-style: var(--system-font-style); + --spectrum-font-size: var(--system-font-size); +} + +.spectrum-Heading { + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var( + --system-heading-serif-font-family + ); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); +} + +.spectrum-Heading.spectrum-Heading--sizeXXS { + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXS { + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xs-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeS { + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-s-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeM { + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-m-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeL { + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-l-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXL { + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); +} + +.spectrum-Heading.spectrum-Heading--sizeXXXL { + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); +} + +.spectrum-Body { + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXS { + --spectrum-body-font-size: var(--system-body-size-xs-font-size); +} + +.spectrum-Body.spectrum-Body--sizeS { + --spectrum-body-font-size: var(--system-body-size-s-font-size); +} + +.spectrum-Body.spectrum-Body--sizeM { + --spectrum-body-font-size: var(--system-body-size-m-font-size); +} + +.spectrum-Body.spectrum-Body--sizeL { + --spectrum-body-font-size: var(--system-body-size-l-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXL { + --spectrum-body-font-size: var(--system-body-size-xl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXL { + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); +} + +.spectrum-Body.spectrum-Body--sizeXXXL { + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); +} + +.spectrum-Detail { + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeS { + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeM { + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeL { + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); +} + +.spectrum-Detail.spectrum-Detail--sizeXL { + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); +} + +.spectrum-Code { + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXS { + --spectrum-code-font-size: var(--system-code-size-xs-font-size); +} + +.spectrum-Code.spectrum-Code--sizeS { + --spectrum-code-font-size: var(--system-code-size-s-font-size); +} + +.spectrum-Code.spectrum-Code--sizeM { + --spectrum-code-font-size: var(--system-code-size-m-font-size); +} + +.spectrum-Code.spectrum-Code--sizeL { + --spectrum-code-font-size: var(--system-code-size-l-font-size); +} + +.spectrum-Code.spectrum-Code--sizeXL { + --spectrum-code-font-size: var(--system-code-size-xl-font-size); +} diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css index bbf46d60fa..3d21471cde 100644 --- a/tools/theme/src/express/theme-core-tokens.css +++ b/tools/theme/src/express/theme-core-tokens.css @@ -23,6 +23,17 @@ governing permissions and limitations under the License. --spectrum-picker-border-width: var(--spectrum-border-width-100); /* end workaround */ + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/tools/theme/src/express/theme.css b/tools/theme/src/express/theme.css index f697ff48fd..73d5e9e5f6 100644 --- a/tools/theme/src/express/theme.css +++ b/tools/theme/src/express/theme.css @@ -24,6 +24,18 @@ governing permissions and limitations under the License. --spectrum-picker-border-width: var(--spectrum-border-width-100); /* end workaround */ + + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css index 19ce09913f..11ef41c6cd 100755 --- a/tools/theme/src/spectrum-two/theme-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-core-tokens.css @@ -22,6 +22,17 @@ governing permissions and limitations under the License. --spectrum-picker-border-width: var(--spectrum-border-width-100); /* end workaround */ + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css index 29b7528cac..24b991ecb0 100755 --- a/tools/theme/src/spectrum-two/theme.css +++ b/tools/theme/src/spectrum-two/theme.css @@ -17,6 +17,17 @@ governing permissions and limitations under the License. :host { display: block; + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/tools/theme/src/theme-core-tokens.css b/tools/theme/src/theme-core-tokens.css index 420dbac102..3cee2811bf 100644 --- a/tools/theme/src/theme-core-tokens.css +++ b/tools/theme/src/theme-core-tokens.css @@ -17,6 +17,17 @@ governing permissions and limitations under the License. :host { display: block; + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/tools/theme/src/theme.css b/tools/theme/src/theme.css index b59c44dcaf..6f8e6b6cbe 100644 --- a/tools/theme/src/theme.css +++ b/tools/theme/src/theme.css @@ -18,6 +18,17 @@ governing permissions and limitations under the License. :host { display: block; + font-family: var(--spectrum-font-family); + font-size: var(--spectrum-font-size); + font-style: var(--spectrum-font-style); + + &:lang(ar) { + font-family: var(--spectrum-font-family-ar); + } + + &:lang(he) { + font-family: var(--spectrum-font-family-he); + } } #scale, diff --git a/yarn.lock b/yarn.lock index d6a4a3583b..1bc6354fa6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4978,370 +4978,380 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918" integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ== -"@spectrum-css/accordion@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-5.1.2.tgz#728fd22ac7d13875c21659861a87bf4cb51eb0dc" - integrity sha512-UQ8UsryN0p7nYJ300uy+gbHOV21lZ0gO7HZUq7+WBSXlcpK6zoLYoisk/+KfEHVZgZI0aSc0tHD67vFvqkvMgQ== - -"@spectrum-css/actionbar@^8.1.1": - version "8.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-8.1.1.tgz#7acb7795dae39ba8f18fdb043fa4fa857ec15001" - integrity sha512-VrF/CP5Vm7b7d2pYZBjAmhZmeqgiTvDeQTKoAJUnFe5VkO2P2JUSP8QiYWFD7XZ7NVztUFzh2W11eQWHczAq7Q== - -"@spectrum-css/actionbutton@^6.1.1": - version "6.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-6.1.1.tgz#3213db34ba89a5771ce51a84c159da4ded33828b" - integrity sha512-FHR29sujmQMujETsL+W7WmA4zSE1CRiMHm5b8V94w1QKJqksUWuhDljHUfIfTlS8zCPQv0EDGAZdW2UMi08tuQ== - -"@spectrum-css/actiongroup@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-5.1.0.tgz#954ed9b8d6dfe747371747c65dc1f0f5f795e599" - integrity sha512-AJnymeAUMeQjAAgSjg03lZEn4CbC/BQYQ3qDYhX0qbpoakHvXyjtPMFiDzbAe+P4UcrrjYfhUJB2eqAK0Xkozg== - -"@spectrum-css/actionmenu@^6.1.1": - version "6.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-6.1.1.tgz#84753483d249e27e71facd4d0053c3d3cb5677ad" - integrity sha512-dkMroSrS+Ju4IUzVur+qr6ew1EvydCG4djZzn4Il4tdEZ5nguTaD0GYtyXpzNqyzQWgWSJCv8f9K7rQU6NHSTA== - -"@spectrum-css/alertbanner@^2.2.0": - version "2.2.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/alertbanner/-/alertbanner-2.2.0.tgz#c39feb201fe56b5acc2c1d85340c426431481e39" - integrity sha512-UjvegcmMUquXnJvpFSX5O6/qI+2tVgjBQ824e769kpj4V3Rf93HMPWn0MbTyMvEfdPADTZKbMd5iyFQjmE7Mhg== - -"@spectrum-css/alertdialog@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/alertdialog/-/alertdialog-2.1.1.tgz#765494d9809c255f7ee8758b94c9fcb254050006" - integrity sha512-/jOfaTtiUl9tf4jlcoyWyxfdW6zmnABiRg64DocRS9f3vtbc/hXHjW/t61bDIQ+VJrBwfYRJKVjFe9DMQovlZA== - -"@spectrum-css/asset@^5.1.1": - version "5.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-5.1.1.tgz#38c1d6acca06379c93bb9a7e62d42ce3e5720d3d" - integrity sha512-//KDzWNeHuFYVoRDNRrKEj0sOe4mvlwVgOk3PiAJFIbIt42gfeQQu5CNXrHnzPubU8vVnXd75hPTspuiOw/Urg== - -"@spectrum-css/avatar@^7.1.1": - version "7.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-7.1.1.tgz#b32e6ec9e614e4863ffbef88ea1efd4b7d1354ae" - integrity sha512-8TYKfmIEkec4QUMXrUtqRJjKMr0j8FP1q6q8N3DBV8W4zLXoYrrdiLCAj/p6EnKbV7+BNktqq0dwbggTeCy3Uw== - -"@spectrum-css/badge@^4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-4.1.1.tgz#d4057bfd9867e3c78a5d9730fe898991fa0b4fa3" - integrity sha512-XvUqnOD2GeXUkUOrLHB2+kqYgdrNK+BjH5AH53cKWf2YRC25vG72xCiy880RGh6c61XagBTjAQ6RPo7uu2N4Uw== +"@spectrum-css/accordion@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-6.0.0-s2-foundations.15.tgz#1436811946e192a34183fba916067f4664054a6b" + integrity sha512-0Xy19oimBiB4Ce82nYNW5H8N4yNipkOHcs95srIKAij/jurBgND12oiTcFt5DZt8o7mGD64Sd5nmu+ai9tQYuw== + +"@spectrum-css/actionbar@^9.0.0-s2-foundations.15": + version "9.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-9.0.0-s2-foundations.15.tgz#b8e73b5893102836b9a8cab8cb609cf224006917" + integrity sha512-fuecQVAyMNCQi8qdHldFbzq2VA8MwF8BS3ostyVssjLuqxaJJQFK6nDxNHxDTz0dVw6fl78GvPXLfsm6cGA0xA== + +"@spectrum-css/actionbutton@^7.0.0-s2-foundations.20": + version "7.0.0-s2-foundations.20" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-7.0.0-s2-foundations.20.tgz#97003ad0eeb11c590fd915e94d72fffdb3d8dea0" + integrity sha512-bXJ2uB1PoEhTQiZPz0GRILS4Er80zbo9h8AM/T2HiApuNZvV55Q7NCNvOwvccPoZhUqfCMYGnJVp7vwNmyNpxQ== + +"@spectrum-css/actiongroup@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-6.0.0-s2-foundations.14.tgz#79a21c3a6a163e5ce4f4c347a06e8cd934f62fe4" + integrity sha512-YIcyRcDKlQUBZnvNfCUYaB6KfKi2YLcAbXYA6QRAprGuqB57dZnZQEPhC+PN2rOOurek8FZvZ/S23I/pePiHMA== + +"@spectrum-css/actionmenu@^7.0.0-s2-foundations.14": + version "7.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionmenu/-/actionmenu-7.0.0-s2-foundations.14.tgz#bf8080763d43f84ab81bae2c560aada35cc0a9d3" + integrity sha512-fywtGUuJDuDMeLA0RZvG5+jgNaUVFfhqr1gMtglFY94R82z4TG88Lxbxp/q8l483acHQ4UejsfsMtZiQV+Sq9A== + +"@spectrum-css/alertbanner@^3.0.0-s2-foundations.15": + version "3.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/alertbanner/-/alertbanner-3.0.0-s2-foundations.15.tgz#cc62ff57e9f170add9e6b19df74f46b42fbc8d4a" + integrity sha512-oOulN3aU44vL7BcHB06FrkTKI7ggM+8L+UyBv0OuaausaGbchWmK4RWcxdirYysGqlWjNFZMuz256XFxXHBnHQ== + +"@spectrum-css/alertdialog@^3.0.0-s2-foundations.14": + version "3.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/alertdialog/-/alertdialog-3.0.0-s2-foundations.14.tgz#148daa0636575102019c039ce4ddd4554b83b7ec" + integrity sha512-mVKjQCwqtJojfoYcgnN56LVSHr/Lhsqgwx5yZMTmScaq3z1L7Uw1X78cnOGyEba9pGPxgepyeb2ffkgj163O+Q== + +"@spectrum-css/asset@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-6.0.0-s2-foundations.14.tgz#02501d3a9670df95d4e85c8ff900d6c6791b1072" + integrity sha512-PH3kX0XSQSd/NMgyx79JwylZWag2xPOEOxKdOJiGlTG+hx/nOOu/H5Vi3dsDTsW8oYlecCpXQ88UEnmdxS04dA== + +"@spectrum-css/avatar@^8.0.0-s2-foundations.14": + version "8.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-8.0.0-s2-foundations.14.tgz#f6e235bf49bae3635c736db1f5525c2d2a9e18c3" + integrity sha512-spZJ3nT70+1iY7X0F30InXrFLaLpczKFJyLLxRWbpCcUp/r0FDnHV7pt4LQk/7eYa/4cSEJTK1ojlkH8jrsClw== + +"@spectrum-css/badge@^5.0.0-s2-foundations.14": + version "5.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-5.0.0-s2-foundations.14.tgz#4aa9c1ccf9e7ba0be80bdd8474088654374e25ab" + integrity sha512-I/TmIPk4MJsi+37Iw89kRIyYVX/x64seTGoZdpGJj9gUQzln3UyYBI9gMa9Gj04oky/GlPBsjpN0z7EPTldJnQ== "@spectrum-css/banner@3.0.0-beta.2": version "3.0.0-beta.2" resolved "https://registry.yarnpkg.com/@spectrum-css/banner/-/banner-3.0.0-beta.2.tgz#df448a3dcb8ac63448bd628843a2895cec305780" integrity sha512-NqrT03ItWzj+L0dtqjedhop6wKOspBmaowzp9IOY/2kL561kRqYTLKR9vTteZ3cEDVD3ajKA8y+bKIW0eN+X7A== -"@spectrum-css/breadcrumb@^9.1.3": - version "9.1.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-9.1.3.tgz#c1ea002a4e1f3f0b792b951b0768b1a35460da8a" - integrity sha512-BHzCr5Q5f2+CQxSlq8rDM03wzvn9EozoI/xDP4kw5WrWI7gXUmCJc2iHzu94pQuWprSxoEE+wfx+r63VQ9gsOQ== - -"@spectrum-css/button@^13.1.1": - version "13.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-13.1.1.tgz#42be27e8f8d03a7af3eca17fb7566ca2b8cc5f24" - integrity sha512-GyLNIErpuSfES0GftmzGgsBLgzdMd10PVU34TgYuRz9Ad3DeRpfT1PzA9jKDjqXXCtf91tB7lMkYPdUCHcHLgA== - -"@spectrum-css/buttongroup@^7.1.1": - version "7.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-7.1.1.tgz#452d5d38a09f3199a55c81e47c1a565a1199a64d" - integrity sha512-yIG09dGoR9AqpJMsz0drHlvNJjPThZyZKvJtk8Et5+t4AecaNbUC7vJ9PWm18URTxg2fD3eg0R0tbAiFFnvp2w== - -"@spectrum-css/card@^8.1.1": - version "8.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-8.1.1.tgz#eaf8716ff96df94da211f6c45c7cff8df3a72bf1" - integrity sha512-aFfnyiQJ3KJCPPrahads1MH2GCgkHHUvi2UZdCsv+naUieYg3on2DZ6KXuvcZaklytCspK/tBe4tBlI5U6fqOQ== - -"@spectrum-css/checkbox@^9.1.1": - version "9.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-9.1.1.tgz#f51a7803f9347028aa80603b1f71ef22e89f817c" - integrity sha512-GKjMwqPra+OcL03RPMwuqmssL+hrHohRqv8n9BcwSdCgDfwRgtqwZTPPhtY8veZUQaU29z3xjHpelJViatp6IQ== - -"@spectrum-css/clearbutton@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-6.1.0.tgz#a9af7bb3d51173c7aa391c566fd1a61e4b8ef815" - integrity sha512-H363HoWvPHMw8nu+eZSIzIQN81HoDxQV6/sN8ex+suKTQd0cy4D22HiXp/fgqrEF/rnTV5WULa+foxJCmYv1XQ== - -"@spectrum-css/closebutton@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/closebutton/-/closebutton-5.1.0.tgz#a34ad219b3a07e56bfd0ace8e3689e6046ee683e" - integrity sha512-ap3dsoqc+X9kG1XFdhk949pZFgE5UT2n4RPqcoQJfDvAhfQNbj3UVZzKNLYZtUMuq2KaKHVfoUHmFwHcuNkeBQ== - -"@spectrum-css/coachindicator@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/coachindicator/-/coachindicator-2.1.0.tgz#8cd28eedc535121f3f125b909bd0b2381b85b1a5" - integrity sha512-Y30Vbt628Ceez49IbbfOFOX5LNzAKDBLvAUDyk+N57fmRbGgmt0JICiDGlIFHA2NbHOPeFZV15vF6IjFVLrsYA== - -"@spectrum-css/coachmark@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-7.1.0.tgz#7640d5e2f7ba7192e18beda46e91046b1b334610" - integrity sha512-cK0yAOyxRf9pJJSakphp7c+iNbOTbbKIay28Xne5k8ZgdYmL2hd7rq5AI6fjSMUCU9EqpqubsnkgUpc7UgOgTg== - -"@spectrum-css/colorarea@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-5.1.0.tgz#f475c74b5041bacc9de04689a6073af0407be0fc" - integrity sha512-6xGb+e8jDot+jH7U3S0q2y/hCvZxrm7GFDt3xE4OyILEfGCP9L2rvUXqntK9v7EXEiYyw+QDhctDg+EVVCcihg== - -"@spectrum-css/colorhandle@^8.1.0": - version "8.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-8.1.0.tgz#1ad50c08d035747bea26a6f7ad983ba9fff624da" - integrity sha512-RDRY9gqyt3GoRYhKwMhFlWKqByw1VynTepycuwa3lFoaxq1saTxwsYpEx2Fvp5ASPqEJMp5ki792EwZGB8j5Iw== - -"@spectrum-css/colorloupe@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-5.1.0.tgz#110dc3d0abdb6d113b6f86b54a8aeefb302cd00c" - integrity sha512-HdzMBhrPlztSrfFta5JXOQsRAtQGQNHYOnpKlS7UUNsLHOXYz0o7vXlqid/vZwa8Tm5yHalvjnrqvsUzRKDgHA== - -"@spectrum-css/colorslider@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-6.1.0.tgz#020523916361bdb578a36e20f84f8dfdd82ab588" - integrity sha512-3f3PCoFKlYaDrHGi/UjBCE8cp0IOQGoO2+R7iSEmsg05ufpx0wYcykIObRKi7KAJAsHwhvIXwvOYB22XaqWHZQ== - -"@spectrum-css/colorwheel@^4.1.0": - version "4.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-4.1.0.tgz#6ea22820aed323e00df86d6025dcf62dbc429d83" - integrity sha512-3IEts+RodM4jaYGmvyrWkPmlYiKHTEi7AdswZQZvqXLSvZN+fX6w9Vfwdh2nHoM/jl0NAJT8k3VZim5M+Dr8RA== - -"@spectrum-css/combobox@^3.1.2": - version "3.1.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/combobox/-/combobox-3.1.2.tgz#5499ac680a09c896970dc9f1f9f4765c114268ee" - integrity sha512-O0VkTnYyvIl+lWnUjuH87FFd4jGgmfsK/8mNz9w+numRZPRDvwgVuLr5v6AncFfg/DJHJwSXO57dVZ+H5unwaA== - -"@spectrum-css/commons@^10.0.0": - version "10.0.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-10.0.0.tgz#1fc4ca41bb3c8790a8f659164999125ce5d65e91" - integrity sha512-o0agGKaqux6DQMZcOwMduUFfwD1aDzS1BfL1gf6TvlVBdgrUSpzYelHU82e6kjB7DSoYoG5nCngtQoR+ItM34w== - -"@spectrum-css/contextualhelp@^2.1.5": - version "2.1.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/contextualhelp/-/contextualhelp-2.1.5.tgz#a1c012ecf251b36af2a77271070a0e4176747072" - integrity sha512-omL3G/odcnpBRMbu0LRW/QjQ57cpI+bWOE2cjTb4l6PeqKt2zhmFpIusYVFq/DmTZxj2zh8f/W6tcriwgYd93Q== - -"@spectrum-css/dialog@^10.1.2": - version "10.1.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-10.1.2.tgz#1598bd263a74be821504aa4951aff94edf00f6c4" - integrity sha512-/Fg1h3RkuffOaTAAAkwN64apNrBAhn/z/5ZxAsBwnomcKYqEtnU1mO2ztbn1n+n79WacW0MPw3C6h1BsuxmD5g== - -"@spectrum-css/divider@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-3.1.0.tgz#3f62c7ba3475866a59d2475d2e8b89d1ddae7b34" - integrity sha512-JhD4B76iaCHZE6kSzsaqRuGOxv1rMBrJQXSxdnZLs270uKr87EigAj1Mqb8+afqcBQ4v8xFJvlYihCldvFn3hw== - -"@spectrum-css/dropzone@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-6.1.0.tgz#414ae251801dc87f2a02f592793ee958497ffc4a" - integrity sha512-W/PB6X77XBRH7Ga9pN+xZLdPjUaexv4r4e/FE/ti2vd9/Ea0ZlPczAaWYGVxWpon0TZ9/TfcUl2SefsRDjrQDw== +"@spectrum-css/breadcrumb@^10.0.0-s2-foundations.14": + version "10.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/breadcrumb/-/breadcrumb-10.0.0-s2-foundations.14.tgz#f99d9567382eeefd574d515f61228786a10f94f2" + integrity sha512-Id2BuSmCVFyL4PrJ2n31datY2+FiRuV7lwYF2tnijfXyVW27Cm/Lp+remuGR+SG9aBfcvqZXeF+ExGYFVddq4A== + +"@spectrum-css/button@^14.0.0-s2-foundations.16": + version "14.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-14.0.0-s2-foundations.16.tgz#b3c70750b79ab18fec81f2455eaef187776e2801" + integrity sha512-XnIpHKVYmXJBaRXsi0GMdBvN9eqQCOVBZ9JbIrIaf3GPicxRYSI4BtJyA+XV05r6OcNGB9nB8x1i8MvSeeh9jg== + +"@spectrum-css/buttongroup@^8.0.0-s2-foundations.14": + version "8.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-8.0.0-s2-foundations.14.tgz#711350954c3f80e73755d62d1f58f183f42bbd44" + integrity sha512-TQeONI32mGv8u6jvtuSVLGjarbD9SRY4s2jXDG5TUlAbGMjQwW2/8vdRh2a/LXX/WYic94czOHrE34O/SN6Gpw== + +"@spectrum-css/card@^10.0.0-s2-foundations.18": + version "10.0.0-s2-foundations.18" + resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-10.0.0-s2-foundations.18.tgz#18568df91c0764873da996a639887399b1b12af0" + integrity sha512-PbwCErtxM2tIZx/YylkXp8DqVPtrT1D0/4ZYNpfIQJnx1OwLR3PTV/djRam7/aA3whlCWVokOLElw3lyp6xc5g== + +"@spectrum-css/checkbox@^10.0.0-s2-foundations.17": + version "10.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-10.0.0-s2-foundations.17.tgz#50573f7b9feb0ba8892fe9a5b6fe8b782ba590ea" + integrity sha512-fZOR20kbx9bOlw6i+3lumd/siUMwK1a2etIFLvxwSYUJS+p5cCZ75R4KKjWdQheiandLtFsj9M9Sh+B29hooyw== + +"@spectrum-css/clearbutton@^7.0.0-s2-foundations.15": + version "7.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-7.0.0-s2-foundations.15.tgz#4ccf299e55672a4fef727a3d47b292978621efb4" + integrity sha512-vAIXOhcvIpAQIy0uVWZpJxDqkypt9hckY7dKCUxUmGrEkVBPQ9vzsuyd4+m2L1Gz4ufStYRpCtAvQcj4PNWAkg== + +"@spectrum-css/closebutton@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/closebutton/-/closebutton-6.0.0-s2-foundations.15.tgz#d1ca10c9333826823234f1f4f1986b219594136c" + integrity sha512-2AzHGHroSDxNEltezhag80BVAzBDCdjbbnFo3C0Gj4GByL2VH4Hua1z5I2xEZ+UK2aoc3RDDAeGzEJVEtWOSJg== + +"@spectrum-css/coachindicator@^3.0.0-s2-foundations.15": + version "3.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachindicator/-/coachindicator-3.0.0-s2-foundations.15.tgz#411f763272ef715f62b9552f800391a6a543cd35" + integrity sha512-GYFpUiL4wojCcpsC4C3bZK/etnxr87r6q6hEvIhgimtqZPEaSbAqEDOaWOX5i4A5bQic6vVnF3Jd/9P19Ls2gw== + +"@spectrum-css/coachmark@^8.0.0-s2-foundations.16": + version "8.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-8.0.0-s2-foundations.16.tgz#3553893fb01bf620dac707cdbaa84b3fbfeb6f19" + integrity sha512-Dipp7GRyyTbssYrK5/e+Fr+i2FWwDJQojaJHQRS1nH32QKjisqJyRkMT7RfOk2T1lntF8f8rPpgbPkMDGxJR+A== + +"@spectrum-css/colorarea@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-6.0.0-s2-foundations.14.tgz#df85a9f19764568af1803f1c3d0f57334e54a0e9" + integrity sha512-Y4k3sg8D/HoqyNmczad/ny8XumSdBJigAbBxGhopDH81grDKTS9Amk90j9/8RE+KRUcPD9Z1hlmUe2hBr98grQ== + +"@spectrum-css/colorhandle@^9.0.0-s2-foundations.15": + version "9.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-9.0.0-s2-foundations.15.tgz#889664c8688db9c7b99e1e6908de30c42189465b" + integrity sha512-vvISiQ6vzrFGmwtktqZQ+TQNUmjkKFSUhtmHtVPML7bHWeLOYbxA7bhUw15EZlBwxtBYV6u3oBOqwnPab0HqRg== + +"@spectrum-css/colorloupe@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-6.0.0-s2-foundations.14.tgz#b90f9d2e35a0826ded58cc625096cd2f6935ca7b" + integrity sha512-ZA0DuBemxFQNS+Z1inBnfVEt1Ii8rs3UkTQukjH/VRZezfuT5ZrpZuJWilzumwen0woS+904qLmBwmYeAs4kuA== + +"@spectrum-css/colorslider@^7.0.0-s2-foundations.15": + version "7.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-7.0.0-s2-foundations.15.tgz#dee84a37398e257c1d3c983f5a21dc7d37e69c93" + integrity sha512-5ZFa19JZcfVOW5xCKdkNS8tTeW0bHFoBogBEJYsq4hNn6586zPsieP/KhjrCVp50JweFWnVIdD8I/FqAao3JHQ== + +"@spectrum-css/colorwheel@^5.0.0-s2-foundations.14": + version "5.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/colorwheel/-/colorwheel-5.0.0-s2-foundations.14.tgz#be62f4675e597c02da0f03a3a6005734f35dab03" + integrity sha512-1J6Y473lpqT/HtGt5WfhzY6P7kjcH5mKQPMzSH9PBlB7WXalDU9UOcH2XFxLvG5dEmkQwq31xXgNnb7gf3SvDQ== + +"@spectrum-css/combobox@^4.0.0-s2-foundations.17": + version "4.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/combobox/-/combobox-4.0.0-s2-foundations.17.tgz#8e64ad8cb712730bbc7782921215cfdab006d251" + integrity sha512-zKhrYo3svDktafzBy8blV1Fjf7eXAE1gfG4LxcVqanRWbI+Kgi5aKy/2buQ1saO4wwV4Cdz4F05LJpKcegXUfg== + +"@spectrum-css/commons@^11.0.0-s2-foundations.14": + version "11.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-11.0.0-s2-foundations.14.tgz#3650a0dd46c991b1d105215b3c06a7a548d88008" + integrity sha512-4jOrGOU0Lpzu91L23HPxxAvSJUnURdEhS0Mk5PynA05fXPAMLWQyNeBrf+6yVYlrN/8C1z8Mqf2f3KbL2Vk3vQ== + +"@spectrum-css/contextualhelp@^4.0.0-s2-foundations.14": + version "4.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/contextualhelp/-/contextualhelp-4.0.0-s2-foundations.14.tgz#1833f0edaea72c864e299a82370f02bb918dd9cb" + integrity sha512-O77NpQDn+XQ56tmThf1ddWx5pQmGfmj8Qgy2iAfJbrF107cHytFXOfU7GICuQwSBNrsK3Bkrd6N7cTnWS72unA== + +"@spectrum-css/dialog@^11.0.0-s2-foundations.14": + version "11.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-11.0.0-s2-foundations.14.tgz#5e9908d8176b31cdfb085f132568044daf0327ab" + integrity sha512-GGaUNDL53pcKIkpTkMV/Dvty/ahY+nFqYu4Oi/yiZbKuV1MnZMLlWBtQMXaGGSIrV92+CYsgiqNkZj9268Zpsw== + +"@spectrum-css/divider@^4.0.0-s2-foundations.14": + version "4.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-4.0.0-s2-foundations.14.tgz#d2b75d3a212ad73a9e1cfe55a18005d488c9422e" + integrity sha512-oEldq252jFlKMFNH03zhnOjwIWVxWF9blaS2RdciiWx3PH1JY2rZuX6lixWGS9M3GNn0tIEaQ3B+k3N1nzknmw== + +"@spectrum-css/dropzone@^7.0.0-s2-foundations.15": + version "7.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-7.0.0-s2-foundations.15.tgz#5ceed3afff038b2fabb7377872fdc3b6c99bd5b2" + integrity sha512-wy/+KcD8ipZ9F/6pDixM2xC/Os76bsu/JDLvNrffE7QPcj8aTaYyq9MR5Av48vh1eVIqL26gHkrCGRWE4zOMiQ== "@spectrum-css/expressvars@^3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@spectrum-css/expressvars/-/expressvars-3.0.9.tgz#72678e0845c240bc9cb6b4d828f20806810f4cab" integrity sha512-mnxdnF2NGNdba+3OomwFURPG0XqNRD+S2cmX0ARYnia9lv84HpzhbSoGuqmQO4+4+dXe46zYjnKRe2L8oJM/zw== -"@spectrum-css/fieldgroup@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-5.1.0.tgz#e335fd0bb592991aa11df146870b263d2b08fe40" - integrity sha512-7ToTy0oq1QbV9csoeYTIpN0AvD00ckx3fRIIDyvq4NeRZh/ScS80qur1s6dKfoh9ZK5SHyqbi0Fb8VEQXmktzQ== - -"@spectrum-css/fieldlabel@^8.1.0": - version "8.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-8.1.0.tgz#9f07a95f3e453013ff1f8ce5861d159b9645229d" - integrity sha512-SBxVDS0ih4IEGi0sO88k1iEy9k5wGf8qYojRpWNjRJIJFtC1VsLvwl8RzqQS++x1YEQDIeUmx6zEfxDPcMiJUQ== - -"@spectrum-css/helptext@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/helptext/-/helptext-5.1.0.tgz#cf322de623c73ac6974b1a5c1859a3cee59cbacd" - integrity sha512-4C3qmfQM0fvdWf4WYU8+A955RY8LbzEJT10vYfzsxhdD5B2Sk/okv1dSBFrr04mxTAFSo+NMTaDqgjPpk9cyoQ== - -"@spectrum-css/icon@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-7.1.0.tgz#de7e9b94501d3a19b635637a5e4d440626207243" - integrity sha512-6zEfyUDcKbWKEEPGeOcA45kG0fXk2Niq3A7wLF+DGunB5tZ/PP2N5bqWDjI+rmK/IJi+C3npf3KncZMogTzsZA== - -"@spectrum-css/illustratedmessage@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-7.1.0.tgz#824f814ae4d8cc9432b576888b9f79442289c71d" - integrity sha512-24iLIgR6pT80ut/phkc9YT8fHSt2M1MBMn59yqOe0TD0nIR6IQnHkylVhF3830NfFzpbsemh8Eik+rr3U5M+dg== - -"@spectrum-css/infieldbutton@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/infieldbutton/-/infieldbutton-5.1.0.tgz#d50390059185edfc0b308347f81808c021e95d36" - integrity sha512-xVvMa7nfmVKRkHyUFGXuMrM0TcULahXusFEamEQFvj0IAPkwPE9q1nxVf7uRm/gqs6qh8V6N+hHNepEctsxueQ== - -"@spectrum-css/link@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-5.1.0.tgz#6e15b557836b370e181edc39c0e2e40a7c0944df" - integrity sha512-UP3g/iRnMOpp3/QsqCTwZhfuhEs44P6ActHqYpGPGSj0goT/R2F3VWi+YtYLBy8uSzsjdl61WFw32fg9ZBb9zQ== - -"@spectrum-css/menu@^7.1.4": - version "7.1.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-7.1.4.tgz#61b250bc0408e5d00ec042c684f575eda77f62b0" - integrity sha512-OXRmHiWd8AqCF7nrT1MhWjN+Ri+d7VFub7ZUwAxhPRBYOXur5GQbx89nrzF0DUlV+h8pIEtV1hC3tUzRQc8c+Q== - -"@spectrum-css/modal@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-5.1.0.tgz#bb8b0950663a2f7577d06353542bb0c5409515ef" - integrity sha512-zKGkB9xvLu7sN/GacHLIjJyQiZrXSswT/nvSUn08I2lUBJCIoU6DLRKPKcH0UvcvoxjHWkd0fE2l6ggNzaR/ZQ== - -"@spectrum-css/opacitycheckerboard@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-2.1.0.tgz#2b13141edcdfbddf8ebd5b195c0249a69caaa2d9" - integrity sha512-Q5jvCJshyfYI6I2vxyZIfeJkf6aj2fiAOrd+zWDJiQG2QOMPgLu8lP25mxLdOnQ2+oUJuPaVHnhdtqe6h67NEA== - -"@spectrum-css/picker@^8.1.0": - version "8.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-8.1.0.tgz#ff655bf125d0e84523a27f567cfeb9126bb60070" - integrity sha512-cmpk8mCK9lHKH2SWaU5DhSN2MOOArLTTCxU5jW8smOtKklLGOVYSyvkKJWkoBtRIEWcZOetZCBtbmdV/X3xbxg== - -"@spectrum-css/pickerbutton@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-5.1.0.tgz#273dda0fab4490211f3a93a7a68edbcc7dd6f30f" - integrity sha512-zpSsLMm572g0nU3cqDlFGk6/X47aV2bMffPLS49zuJibAJbe1+43mhN+XoPW0dDt08q6GP1ASmpOhwdKGcXcaQ== - -"@spectrum-css/popover@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-7.1.0.tgz#2d55745f3dbae32cc9413ee05e806115443c70ea" - integrity sha512-j7jyZtFlio5w8nEkttG/kyb25QpBlZkF0YIKzfkAtp5sZ13b4A7p6CFHYlEPqo8j1YvsUBH8wb43EY5hooG9yg== - -"@spectrum-css/progressbar@^4.1.5": - version "4.1.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-4.1.5.tgz#e01bfbc5daf59f5ac054c8179da3236a4cc0cf2c" - integrity sha512-EM012emG6anGkm+dDBGv3z/32ABALLtXXVGoSoQtXiMAHAmjd1x51Dqh28MZsbX6tX7CccfzW3TdBaz+HC2WNg== - -"@spectrum-css/progresscircle@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-3.1.0.tgz#d4de439c3ae3f240030d3a682f6d1f6b8ff84f9e" - integrity sha512-1zGnhlYD3suY1E1b2B0LLHFNC31gZMl7NsoGRzztj6dwUVF9bbmrMH7PlHkAqN1aTiaQaFGunEtFSW/XbEc+XA== +"@spectrum-css/fieldgroup@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-6.0.0-s2-foundations.15.tgz#06beb1ff15bfceefd4f7b6a90777723720ee6ed5" + integrity sha512-4U+tOGTqyD/vjIrgs3sMML/TXrM6uPZz3Wr3XzfatkhH+FJQv5k1KWo0MCHMSiXuYsvw899md/FrXFYMQDECwg== + +"@spectrum-css/fieldlabel@^9.0.0-s2-foundations.14": + version "9.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-9.0.0-s2-foundations.14.tgz#f6b036f3e1ad7e383c33121db5a47f5ea944e4d0" + integrity sha512-T1OxBt7G13fuZ/iJKH+fsytJMVmmJS9juPQj5NLHBNpHp/y5evbFVEGBTOcS+5APeGb0ylQexTCJREywH3erVw== + +"@spectrum-css/helptext@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/helptext/-/helptext-6.0.0-s2-foundations.14.tgz#1fab5f3082d03220f30d74f80f78c843664331c2" + integrity sha512-DpLJAn/NAEvtpSD7osO710cbkAfJ2xU+UkJzNf9gBolnNpBmc7LH3WUQ1BYQp8DcFwXOG5UEAgGNVqfgAwHXaQ== + +"@spectrum-css/icon@^8.0.0-s2-foundations.15": + version "8.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.15.tgz#df5af5919ed0819eb9a24df9fcd55fd703c01121" + integrity sha512-cj7KsacesxQz6JsADv0Ks9y16zKTvDJqlGv/RsU/MBglgM6KZvWO/AA7381YPgPqAqxYi/xb3RckqeNwGJgB/Q== + +"@spectrum-css/icon@^8.0.0-s2-foundations.16": + version "8.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-8.0.0-s2-foundations.16.tgz#94b04fa1d30c378d21bb12a137095472b2596451" + integrity sha512-Cy2kAgP9vO2+Jw93zToIZrlJITp+HiOmvVkUchpX8Og7M2zEV8FixlDaqFaZ4A8uN3aFuYb0tcHa6u6rxyDQlA== + +"@spectrum-css/illustratedmessage@^8.0.0-s2-foundations.14": + version "8.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-8.0.0-s2-foundations.14.tgz#581a47e855c96d7614506ad169b99db07ec9a7c7" + integrity sha512-VI795aLmZc1hKI6yvFCW49/NbGFaoM7lyxkgzRlUUpprhp2gW+anEsEitD9dxOPN0SiI4QDpisPoutnLV/2e8g== + +"@spectrum-css/infieldbutton@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/infieldbutton/-/infieldbutton-6.0.0-s2-foundations.15.tgz#158eb08de48255d70c8bcafd79850455011f6fed" + integrity sha512-OTQvXg4jsbn5DnTEn7UZMwyLfq5OOT2BpyPy4xhnFfhcmvHZDE+4CGeIo8CRmnMduLg7uTNyZQnv7AnHM/3Z2w== + +"@spectrum-css/link@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-6.0.0-s2-foundations.14.tgz#0427f6c2bfe96a6342c5475b9ace840a3f082503" + integrity sha512-JrEpygCJOuHmXyhB6AeRaHUB2bphc/uUcYE5B3o5BijzuCXBKkGPvm1B0FoTKI05apkpEeM6fgyI7tIoKdd1xQ== + +"@spectrum-css/menu@^8.0.0-s2-foundations.14": + version "8.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-8.0.0-s2-foundations.14.tgz#a1304f691e9415d75578292b51d504e1880d7cfd" + integrity sha512-haFAhMm1yex8Eb1CVhz/mh0q6VCnaa19SINsheuNZ+b12jH8VNynK9VYZygMjJrH4GpRXaAg/8YskYodlrEA8Q== + +"@spectrum-css/modal@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-6.0.0-s2-foundations.15.tgz#ecd91c5a064080fd09ab5092dc49f03f6a26052f" + integrity sha512-vWZ2sxmL+Dk+Db827rcWVwixiIw++QJeOiPecy3Oaw8rwbmS3RRPwSrHNlTOYpsMvR+QnDTE8/dnOAMbYx3rqw== + +"@spectrum-css/opacitycheckerboard@^3.0.0-s2-foundations.13": + version "3.0.0-s2-foundations.13" + resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-3.0.0-s2-foundations.13.tgz#f6020328a6204746b13915dc9486823fd7d652cf" + integrity sha512-qpkPHnC/F/6vbBrQ4CAXdCaKVFiZfdew9jX+LGh3yq3x8gAyfDWUcBZXjXVRnKqy0WKpT8xyB1KgXLHYywG0sA== + +"@spectrum-css/picker@^9.0.0-s2-foundations.14": + version "9.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-9.0.0-s2-foundations.14.tgz#9bcc1dceb296b839173e0dbb237ab222054a6222" + integrity sha512-MB/WtO8GDR3qGKJQcPmBjEKgU6gD9e/XKp8KkaF4JxtDf6VY7d88d01bjVaX4/QTXhby1J0CG0iao2Tnp0IKqw== + +"@spectrum-css/pickerbutton@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-6.0.0-s2-foundations.15.tgz#64d04c6e930ae47384fb3e7a09ee8fba68940df5" + integrity sha512-wEEZCU63/rjVl1yDhMmu7qJmy6AVL5rZzvAHYPaxjwk55N6RW/zMLiaFZ7QfUUi4E+OSGOP/dAWu5gT0Ojw87Q== + +"@spectrum-css/popover@^8.0.0-s2-foundations.15": + version "8.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-8.0.0-s2-foundations.15.tgz#5ae85e670730027f9e69143811b67278effd2a59" + integrity sha512-zUf5mSUDcY9omehMDF9gZZQcsqet1yyQ35FaCsopfzSMJ9fAKvCislb7p2jkwaNA824c96VuVTdl2WSzRAfnwg== + +"@spectrum-css/progressbar@^5.0.0-s2-foundations.15": + version "5.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-5.0.0-s2-foundations.15.tgz#73c0c01c5b9ccad91e66732b4cee2b288493066e" + integrity sha512-pauR6vWbz6mf2S9HB153XQ2Zwe7EVU62WJMIMvQ1tjqtBoel69mi/kPl9ZtY8Vjkx38UXIbN2Nt1VTy4jmveqg== + +"@spectrum-css/progressbar@^5.0.0-s2-foundations.16": + version "5.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-5.0.0-s2-foundations.16.tgz#1a37707c0d531e34c7cf3f7eeb68c2067bdc171d" + integrity sha512-L10R1nqpajjmgu1mpsGCNZa+yOojjxu0hc+8oW83J4gnjFLDSK85womrAx7vMBkNtFtJCMYpz8PUByE9xmIuzA== + +"@spectrum-css/progresscircle@^4.0.0-s2-foundations.14": + version "4.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-4.0.0-s2-foundations.14.tgz#6e10d31f476105d081767ad7f18ef961b255708a" + integrity sha512-oS3J/4huFr4p+GMX2lpnb4CJs3zzdEjwMjqC/Pwv1cFXz+mWovQbQEwlsb18RK6K8uvsUXVkOA6zL7lOlU4W0A== "@spectrum-css/quickaction@^3.1.1": version "3.1.1" resolved "https://registry.yarnpkg.com/@spectrum-css/quickaction/-/quickaction-3.1.1.tgz#1095cc68b6e182721aa141d490b79f6ed6ca1d6d" integrity sha512-PCp/83ctAWrYlDYjZU+9vRMLte2GBaxiKOBvm1g9UH0XqTvocjlyVRNIvVbE0ywdefVtbKGFr30x+Yk9HTdaRQ== -"@spectrum-css/radio@^9.2.3": - version "9.2.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-9.2.3.tgz#1e0f60134fd76089f166ebac3d4b41bbc9cb9cc9" - integrity sha512-1yteEEZ3KsFECE+2CKkD/C+H7aESouqpEOQsc7bNhl9t89E4wIycGF5T54GOrGuRm1ztSike9p7kKndAtaKC7Q== +"@spectrum-css/radio@^10.0.0-s2-foundations.14": + version "10.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-10.0.0-s2-foundations.14.tgz#99d4a108b2abaf40250909c93fcfdffed832f4df" + integrity sha512-jcse9Cq7JCl00UCHHYpl0b1Z9AQr9heN1m6QgAJvnDK32abGqrrGD6TzsktK3wtJ7ugTEIV+1p6Xfvt4mZt7Rg== -"@spectrum-css/search@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-7.1.0.tgz#90d3dde30168c119beb93bce853e4442250b2e4e" - integrity sha512-d+j9/XN3Q2xonqtYUkt9NbPAE0hESlTpFFX7/DIAct6U/KWez0BJjeWrUDDkIc9P0ksdSwbaLt2A63ZKjgB3wg== +"@spectrum-css/search@^8.0.0-s2-foundations.16": + version "8.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-8.0.0-s2-foundations.16.tgz#b3c2af75b29e11c6ef0c0a26258c6f3f7a9256b9" + integrity sha512-99wssaXGkC+AuFafj4jkngz+i4mcDIJg4iDlUk7fExIbSJ6MwjNvKSMAW8pUIpyuaN1IdQbSi/SFP2WrM5gURA== -"@spectrum-css/sidenav@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-5.1.0.tgz#dee43b8e377c5f349f810540885e296b7c8741c1" - integrity sha512-gV5KH03P+hj1pIFtWKi73TKiFth5gjEyZ8F+SpZ9hfQK3BRNtrbp8IulOW+d8My0bQlO+SloHxgYQYTHFthkuw== +"@spectrum-css/sidenav@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-6.0.0-s2-foundations.14.tgz#83377aecc655b429da48313f785ddd378b0764ba" + integrity sha512-D9A5nC4fZ9pBIwAxqMfodAKLwiHMh/A0oXv3v4OHFGpf6nnHins0GvtKx3fwNweW8KAzFB7tBTd1LLMBviQ9WQ== -"@spectrum-css/slider@^5.2.4": - version "5.2.4" - resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-5.2.4.tgz#5906629ff05974901463c31f0b5ea7ef2ee4d577" - integrity sha512-5cgJYmHOWXOaCB5OsW6en/mx2CoV/m9FR+Sm9yz9zsY2uBAFf5YWGhG8ahNQeDRLUQMPVOEbSGGwKPSitd/ojw== +"@spectrum-css/slider@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-6.0.0-s2-foundations.15.tgz#332beaeb9797b22833c5ef6b75f9230b0c59f6bd" + integrity sha512-qOYJNW2twb5Okxc9NRmnLiWzV7rSoa4t4W1E1Hk3QsTune1utYLN6E3GAWjLWnMxdU5r8XG4OYEuPGxF6rLoig== "@spectrum-css/splitbutton@^8.1.2": version "8.1.2" resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-8.1.2.tgz#149d9e98094cd035f6f348f8cf50d72ce8f17f19" integrity sha512-hUsqhEhgm8PfKvwKPSACPU+Jqt0NaovD53gOp9QRa4jU9G3q8RpE5uJbs+pGZ9vyI6ocsm5lbs0zYtA082axzQ== -"@spectrum-css/splitview@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-5.1.0.tgz#db0513af8c0a1ac8c8121dd96320ec0a9947a780" - integrity sha512-18IuJ2/eFT2fsicoyVJbW8y2du2QvLYZNUhnSu8gPJlv0Las0TL/THrUuZZGow5o6cUcDxXOMUX6rz9GmcgBXg== - -"@spectrum-css/statuslight@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-7.1.0.tgz#709f33b37434cf78df59b3a1955a6ad7a6526c5f" - integrity sha512-u2sTzI2lT8Qz93wW2zAaIQY1R7YGske3X79OcbacySaVzCJtEq1mdFuEOtfHeXnRw9kExCD+yxOFv+Dvi07scw== - -"@spectrum-css/stepper@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-6.1.0.tgz#e09511ae1d79a48e40a481eb4f857aa647e0f959" - integrity sha512-FTlP5cBlpqmiaBShJ2yWtwR68FedavZvux8ypBCxGa3dg9lcocjSrO61h/svAV2xvvdL2ATTuA0gv3l5Yzjetw== - -"@spectrum-css/swatch@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-6.1.0.tgz#621cb9d8043432141009abdceca0d5a3dcba3c3f" - integrity sha512-LXnWNEvelAW+uI22AGZfkvb367uVSau5X864xAfK/Cm4pauB9tni6O20+KMIaQ7rOTDZ48VwzWeUkoY7hR6kxA== - -"@spectrum-css/swatchgroup@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-3.1.0.tgz#c478dccec6829c92724ca9ab2f9d557356a25f1a" - integrity sha512-2NKBjAFMXHw32CqvCpwFkOEQITHKrBq0qwrmwOg+5eaePLwDMlrllnf04jd69PB0A160qvu4hrzdV+raM7DJUg== - -"@spectrum-css/switch@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-5.1.0.tgz#75fbe93b3287b537522f75910ad5775da5883ca2" - integrity sha512-fOupI117IKDVztC6FtylZCjp9FN1P4aoVlcJ8ddl2IOUW17apyQWs9eM9ctf/G/cO1iLNk/HIk2ZrWRD/ksXOg== - -"@spectrum-css/table@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-6.1.0.tgz#4fbdab9c4935cb1f86f7d01a79c68dfe75b2d325" - integrity sha512-TAnRShffApfw050X94CNLpfXYpvp4207hH+iv9iINEqEWU7D77URLPG+2dqyGGBQulfRH6HfcZImjfCtCtqyow== - -"@spectrum-css/tabs@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-5.1.0.tgz#1c81edf1d8563265252c61e28fbe1a0e95307a3b" - integrity sha512-p0sGx0oMeFLk6iik3vC9BKhm1aH7nlS67Mfp2oUYuNpz49g7AZuXfsitFt+6CCQapf/Mu4nHebOif/L6alBHzw== - -"@spectrum-css/tag@^9.1.0": - version "9.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-9.1.0.tgz#109adb6ae5c7b2d7c3f7bc4856a11b3af2f75104" - integrity sha512-2m/1jE/VIo9HOS/VFxQGP+zjdbd9irIU0AMXPSSVWVDZkoOSE4NnuZ9WlgloNigK+pVj5wsv2PPedi//tFXoHw== - -"@spectrum-css/taggroup@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-5.1.0.tgz#746a9587baffc89441541fb373ec3253fa412e1b" - integrity sha512-rFBKAeIxOljocRnJ+TAvyIvu+Kmk4LDc+BC1ZxFFnDC7J3Smbk5udi2vQ5NMkJxsRZg+qzB736XaGpAEFz+ZFg== - -"@spectrum-css/textfield@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-7.1.0.tgz#8186fe6ae46d1606ff6b69ba9030ae9f92c4d370" - integrity sha512-7n6EXqxOnVcaeFhq03EGRY/TLiG9MiRUJfrGFjFp4LkJmin9i0CfBUeCyEdbkfClN5+WWCuY1ld9IQ4AV1ijVw== - -"@spectrum-css/thumbnail@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-6.1.0.tgz#72e4ad895564607eedf1ae69a9923cb0c4e76273" - integrity sha512-RW22T2lgJN60KuPg23xES4R5tjMseVoOUzuzubToqfGxRHFCIVl3VV9I8/F+SSZ3USdFWYcg6SVBx5InZWJDzQ== - -"@spectrum-css/toast@^10.1.0": - version "10.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-10.1.0.tgz#07e397d18ec1c7d9c919e8aae464686862b91f47" - integrity sha512-TxkSE8ZvmIj80oCuPRbWHxJQna0/PeowjfXBrHBoKT7pJKF9LfWD2K+AIHwNVYJfaGCPJxsRlZUsldL7PmzfJw== - -"@spectrum-css/tokens-v2@npm:@spectrum-css/tokens@^14.0.0-next.3": - version "14.0.0-next.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.0.0-next.3.tgz#3b1effbd2ec41e0f21bf449f1479c834513c5777" - integrity sha512-Hcirt+qa13RDhQ2X/IwtKh6Q8oFizyyUXfF4PqreXzaTZuBKNmWxte/p21k6BYUupVTGqI1UFcGBQ/omLXIkvw== - -"@spectrum-css/tokens@^14.0.0": - version "14.0.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.0.0.tgz#e9c25523ebdca90c6acae516088ea8772d2d46ab" - integrity sha512-4Tf4PWHXBYM395j+JJxr4uwgi3lx449iqu2BTwzf9dfdKSzEd0fZtpsXWldE2VdZjz5XQrNKFIwH6Gkmqo03tA== - -"@spectrum-css/tooltip@^6.1.1": - version "6.1.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-6.1.1.tgz#6563335aa64c1418d8bcb20f1db1a870059fecac" - integrity sha512-pHpLqiVeUjWzlI/LOqTRJKBPFJ+0qT4V+5WrcOAPavOeo0d5lN1EpQVloQBy1uGeY0dPG6zjG271lI3yLhsuDg== - -"@spectrum-css/tray@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-3.1.0.tgz#854f5faa003050aed3349c9c671ea06dcabd4ac1" - integrity sha512-JX/3uxtiMjD7OzNusvqevnD0PNEzzeqCaCurE4HUZzXk311zkEv7IzLxF2YsBF/ISS7wKPL37wDZcQc4GHciwQ== - -"@spectrum-css/typography@^6.1.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-6.1.0.tgz#7a3c4bee379984769c019b37904467eedd3270be" - integrity sha512-BXuIl0uZqzpYnF9o1JKKXANyf5bUifmVHRwpGQ0J1tX+eXAZNoq7DXJc/HDjRePKQM6M0w0DvDQXh1hQq88OUw== - -"@spectrum-css/ui-icons@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-1.1.2.tgz#596e10c662de2b3a2142277998be5e11faf6aff4" - integrity sha512-rD0EOdabyUJ6pjfvh9eiGlvhk2huhaah+AG8Utzqh/+YgMCn+NQEUz2zxRo9Jva8GXxORLGLDtISafHguOtiOA== - -"@spectrum-css/underlay@^4.1.0": - version "4.1.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-4.1.0.tgz#eccd6ab9e0f16a707f08aab443596fe8c5f24812" - integrity sha512-mZ8JhK7bCjXG8GH7rvJOmVmcJYL744Dj8xMxgm3Wyr1JYaTElklonNKvblatleZ6gDApvowQ1PEtgj+1v03IrQ== +"@spectrum-css/splitview@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/splitview/-/splitview-6.0.0-s2-foundations.14.tgz#55a32f9f7d8fa6ef31401c889d5652af552b79b7" + integrity sha512-J00HM2wKhOj63izAkodzCQMS6HwcTdCuyaRSZ7zYntcUqoe9U2ebdCtKr4Yu/cLYabXSRPDArrgo2oUM5K7odQ== + +"@spectrum-css/statuslight@^8.0.0-s2-foundations.14": + version "8.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-8.0.0-s2-foundations.14.tgz#29966c0d8f088a8ee53c443469539dd82cf3179c" + integrity sha512-2hfeEX9EADllEj+qh7WA9Q+tlK5Nw03+x+T3ZPH1fsGAEun+ib3qSRnopIsHeEwSaHWfY5jIqMI26/J74mxX0w== + +"@spectrum-css/stepper@^7.0.0-s2-foundations.17": + version "7.0.0-s2-foundations.17" + resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-7.0.0-s2-foundations.17.tgz#b84d095b4aa0d3daaa910783a5d05629ad55e311" + integrity sha512-iAxoJWimdLhLou2lCQDQa3nAx8lwa5NO2JfvvcF4r5CBLazsVY007QPyiqdFSE0yJaG10/Lk97aWMXBg1hwsyQ== + +"@spectrum-css/swatch@^7.0.0-s2-foundations.15": + version "7.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/swatch/-/swatch-7.0.0-s2-foundations.15.tgz#2bfc94da82d15286b3a56daeaadd75a5b2914d17" + integrity sha512-ZYy+0zTupXt/rP2hL970raG2VZh6A49JGFcRRcAagByZQm8Q7aRoPgurJ4w2BO81FDv96NipvWQFzCOd5qCYeA== + +"@spectrum-css/swatchgroup@^4.0.0-s2-foundations.14": + version "4.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/swatchgroup/-/swatchgroup-4.0.0-s2-foundations.14.tgz#c83910cd7e0859720fb81428af71ac0cdb43d02b" + integrity sha512-VzdL68qHuN6kHD8maOrwuUQuopqXv+8vFFXhaNMB7kgoaFY+c5n/v2TX3vKQyOBJHryl1dB9Tu06VL+z37gayQ== + +"@spectrum-css/switch@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-6.0.0-s2-foundations.15.tgz#5fe6d5706cdd094888c8e4c61bf858d0083363b1" + integrity sha512-fE0l5MVWg4NUsCEYs9p2MVN+8tEUA1fUKE0wkUStoWbKKaGGm1UPj7TAUEghugGx2c10Y6epnpXq/qZTp4vhuQ== + +"@spectrum-css/table@^7.0.0-s2-foundations.16": + version "7.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-7.0.0-s2-foundations.16.tgz#2edc6781dc1e29145d9d7a272b46c19974b42984" + integrity sha512-yNgfQm1k8xdg/q3T/Cgog06Y1IstvyLviebPi+QlVsaY9VidOnQCa31XSC8+mCOeYESz5hySEGsbiv1JRSJWdg== + +"@spectrum-css/tabs@^6.0.0-s2-foundations.15": + version "6.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-6.0.0-s2-foundations.15.tgz#3e5c8138b04823652c40cd6bb4049484c8ad764f" + integrity sha512-6T6vz3wmHuBEkEXZFjfApF1LRClJ2JfgRz2f3HDJTcIXHGRJXTYh756LlSfwZpVLT/UMQcAHLXv+KOEQb27oKw== + +"@spectrum-css/tag@^10.0.0-s2-foundations.14": + version "10.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-10.0.0-s2-foundations.14.tgz#b854b7775103f10ccd1c15353d2df1262a1c62af" + integrity sha512-Md9bYhaEduhEF1C7G0xytwN28b0Tbv6uNhfO8fZ88x6ohOaFHgBHmLQb19YuZ4w/E034ICvvmxH7cLKxmvFs1A== + +"@spectrum-css/taggroup@^6.0.0-s2-foundations.14": + version "6.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-6.0.0-s2-foundations.14.tgz#f298f69943dafd0d4426322c4aa4d5ba2da8fb01" + integrity sha512-AvpR0q/wtmexV5uiXrAfUphw5VeDvxhbI8f/RQ/hObnON79IzZ+aBjrA7tLI0mcQf78uRYBk4t8+B1GiculVFQ== + +"@spectrum-css/textfield@^8.0.0-s2-foundations.15": + version "8.0.0-s2-foundations.15" + resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-8.0.0-s2-foundations.15.tgz#4425feb9db862a3e4c5d055a805c698ad970e822" + integrity sha512-X11bV3MrxL45b4g27P1E5C3n5+78uALRN1Rirtg37/jcxm0NHV1nq+z2t1wE5dY+sNFM0dSaCv27uFmu9uboZQ== + +"@spectrum-css/thumbnail@^7.0.0-s2-foundations.14": + version "7.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/thumbnail/-/thumbnail-7.0.0-s2-foundations.14.tgz#26b742e5d79769e8b078833c32fe76a1a31b9919" + integrity sha512-N+SwlzHp48pTEaSAbXt+i8yMl4n6P59gghzdjS52ydhSGRjh7MNdTgEpejkLF9pbUn5V2/JNwefiWM8H8E+s/A== + +"@spectrum-css/toast@^11.0.0-s2-foundations.14": + version "11.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-11.0.0-s2-foundations.14.tgz#671c37c6ab0fd36d6c0b8576a1bbc0344eb52182" + integrity sha512-LpOOUS74CQonzv5h9YdtAkOrXzEEw3DMiCrmP47C9/cJdASeiAXb8JAQqry1DtksfNXxiYzmQWY4xXJkB1RuKg== + +"@spectrum-css/tokens-v2@npm:@spectrum-css/tokens@15.0.0-s2-foundations.22": + version "15.0.0-s2-foundations.22" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-15.0.0-s2-foundations.22.tgz#eb6fa9ecce8aae95e7abebda5e63496de9c1f298" + integrity sha512-+PCpuN61B46FmsP/Us9Irc1/3jsahHwhfJ97NlpOTUY25MrEeaIvaAPaKe9BRxK2hk8irclQ06CpUg15p44FMw== + +"@spectrum-css/tokens@^@spectrum-css/tokens@14.3.1": + version "14.3.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.3.1.tgz#52079bad1a9d6329bfcba00702c579366a83c72e" + integrity sha512-YQBEvccp5jC9dxNMSLb708ucrxY64nExvFfJ0iQ+ddlAraOykFFoCTGcQ5UvSNp31Dp348H05PB7zRoStl0Jdg== + +"@spectrum-css/tooltip@^7.0.0-s2-foundations.14": + version "7.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-7.0.0-s2-foundations.14.tgz#9efaab6be30b82bda1e4bacffe939a86f3c46445" + integrity sha512-l6evI9MqG9kdMvasY4eVIH+yxHAzsEyB+i5RgEG7c6xDS63s4k1+VOOSUlY6R2cApoIaCw1wUoGi8aRFW8TM4Q== + +"@spectrum-css/tray@^4.0.0-s2-foundations.14": + version "4.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/tray/-/tray-4.0.0-s2-foundations.14.tgz#d2486dc8a141c150d3b02960f9de707710cdd16a" + integrity sha512-gHuQz0qdvME3VXkPTzS+SD43xLZHmCmfSWT6ZrJgaMkD1zjUZ4S0F88E/EfYlz8rcMVf+aCwd2XSPPhy6otmXg== + +"@spectrum-css/typography@^7.0.0-s2-foundations.16": + version "7.0.0-s2-foundations.16" + resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-7.0.0-s2-foundations.16.tgz#96f97a8804f8be5036ef9f39cf48a122fff98a66" + integrity sha512-N+5endvH1+Q/M51Mh2cGqhZyJ+9p4++r2SnOFk8SEZMpc6+kOsrhAhFvxQmrCCGmO7KGNv65H3wgY37ub6MOzg== + +"@spectrum-css/ui-icons@^2.0.0-s2-foundations.9": + version "2.0.0-s2-foundations.9" + resolved "https://registry.yarnpkg.com/@spectrum-css/ui-icons/-/ui-icons-2.0.0-s2-foundations.9.tgz#34612885b5afd4245e15b5eb55d432f059b95796" + integrity sha512-j7f/0MaCfe4tJGY8nEHL/KaehLBioJ4xCc7qXFQyui/J1Wzt/a5sw5E0Zzh1v02cb8NooGOR5uaFqSvkMSJugw== + +"@spectrum-css/underlay@^5.0.0-s2-foundations.14": + version "5.0.0-s2-foundations.14" + resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-5.0.0-s2-foundations.14.tgz#c43c7617606ef716046b481c5410770af0f33c90" + integrity sha512-lhF1DHSPeg+9ab33bRM5jaxqeuiICT/uGdzB49QXO2nwPC9/WxcEu2jixviS0wSIqf1bz8AcF/NqrgQExJzMbw== "@spectrum-css/vars@^9.0.8": version "9.0.8" @@ -5349,7 +5359,7 @@ integrity sha512-rGfd7jqXOdR69bEjrRP58ynuIeJU0czPfwQvzhtCzg7jKVukV+efNHqrs086sC6xutB3W4TF71K/dZMr3oyTyg== "@spectrum-web-components/eslint-plugin@file:./linters/eslint": - version "0.47.1" + version "0.47.2" "@storybook/addon-a11y@^7.5.0": version "7.6.19"