From 9caf2f6313424450c91c039fafea89bf8aa72624 Mon Sep 17 00:00:00 2001 From: Westbrook Date: Mon, 10 Jan 2022 15:25:42 -0500 Subject: [PATCH] feat: leverage latest Spectrum button API --- packages/action-button/package.json | 2 +- packages/action-button/src/ActionButton.ts | 6 +- packages/action-button/src/action-button.css | 18 + .../src/spectrum-action-button.css | 352 ++- packages/action-button/src/spectrum-config.js | 33 +- packages/action-group/src/action-group.css | 77 +- packages/button/package.json | 3 +- packages/button/src/Button.ts | 71 +- packages/button/src/ClearButton.ts | 2 +- packages/button/src/spectrum-button.css | 2399 ++++++++++------- packages/button/src/spectrum-config.js | 96 +- packages/button/test/button.test.ts | 48 + packages/clear-button/.npmignore | 2 + packages/clear-button/README.md | 28 + packages/clear-button/package.json | 56 + .../src/clear-button.css | 0 .../src/spectrum-clear-button.css | 172 +- packages/clear-button/src/spectrum-config.js | 93 + packages/clear-button/tsconfig.json | 10 + packages/dialog/src/DialogWrapper.ts | 4 +- packages/dialog/stories/dialog.stories.ts | 46 +- packages/dialog/test/dialog-wrapper.test.ts | 11 +- packages/link/package.json | 2 +- packages/link/src/spectrum-link.css | 10 +- .../stories/overlay-story-components.ts | 2 +- packages/overlay/stories/overlay.stories.ts | 2 +- .../overlay/test/overlay-trigger-sync.test.ts | 2 +- packages/overlay/test/overlay-trigger.test.ts | 2 +- packages/split-button/package.json | 2 +- packages/split-button/src/SplitButton.ts | 10 +- packages/split-button/src/spectrum-config.js | 6 + .../src/spectrum-split-button.css | 144 +- packages/split-button/src/split-button.css | 8 +- packages/styles/core-global.css | 123 + packages/styles/package.json | 2 +- packages/styles/spectrum-scale-large.css | 2176 ++++++++++++--- packages/styles/spectrum-scale-medium.css | 2260 ++++++++++++---- packages/styles/theme-dark.css | 9 + packages/styles/theme-darkest.css | 9 + packages/styles/theme-light.css | 9 + packages/theme/stories/theme.stories.ts | 34 +- yarn.lock | 42 +- 42 files changed, 5966 insertions(+), 2417 deletions(-) create mode 100644 packages/clear-button/.npmignore create mode 100644 packages/clear-button/README.md create mode 100644 packages/clear-button/package.json rename packages/{button => clear-button}/src/clear-button.css (100%) rename packages/{button => clear-button}/src/spectrum-clear-button.css (71%) create mode 100644 packages/clear-button/src/spectrum-config.js create mode 100644 packages/clear-button/tsconfig.json diff --git a/packages/action-button/package.json b/packages/action-button/package.json index c1508adcea..77bababfb3 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -51,7 +51,7 @@ "tslib": "^2.0.0" }, "devDependencies": { - "@spectrum-css/actionbutton": "^1.0.10" + "@spectrum-css/actionbutton": "^1.1.2" }, "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 c6692c7ea2..31c97d57a2 100644 --- a/packages/action-button/src/ActionButton.ts +++ b/packages/action-button/src/ActionButton.ts @@ -80,6 +80,9 @@ export class ActionButton extends SizedMixin(ButtonBase) { @property({ type: Boolean, reflect: true }) public toggles = false; + @property({ reflect: true }) + public variant?: 'white' | 'black'; + @property({ type: String }) public get value(): string { return this._value || this.itemText; @@ -191,8 +194,7 @@ export class ActionButton extends SizedMixin(ButtonBase) { if (this.holdAffordance) { buttonContent.unshift(html` diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css index 902c2198e1..72513dad05 100644 --- a/packages/action-button/src/action-button.css +++ b/packages/action-button/src/action-button.css @@ -17,6 +17,16 @@ governing permissions and limitations under the License. flex-direction: row; } +:host:after { + border-radius: var( + --spectrum-actionbutton-after-border-radius, + calc( + var(--spectrum-actionbutton-quiet-textonly-border-radius) + + var(--spectrum-actionbutton-focus-ring-gap) + ) + ); +} + :host([disabled]) { pointer-events: none; cursor: auto; @@ -44,6 +54,14 @@ governing permissions and limitations under the License. text-align: var(--spectrum-actionbutton-label-text-align); } +:host([emphasized][selected]:not([disabled])) .hold-affordance, +:host([emphasized][quiet][selected]:not([disabled])) .hold-affordance { + color: var( + --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected, + var(--spectrum-alias-component-icon-color-emphasized-selected-default) + ); +} + :host([size='s']) { --spectrum-icon-tshirt-size-height: var( --spectrum-alias-workflow-icon-size-s diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 9463d9d1fe..5e2fc0ce0d 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -52,7 +52,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ margin-top: -2px; padding: 0; } -:host(:disabled) { +:host([disabled]) { cursor: default; /* .spectrum-ActionButton:disabled */ } ::slotted([slot='icon']) { @@ -67,738 +67,716 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #label:empty { display: none; /* .spectrum-ActionButton-label:empty */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled) { +:host([variant='black']:not([quiet])[disabled]) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-disabled, rgba(0, 0, 0, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled[selected]) { +:host([variant='black']:not([quiet])[disabled][selected]) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled.is-selected */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled:not([selected])) { +:host([variant='black']:not([quiet])[disabled]:not([selected])) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-disabled, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):disabled:not(.is-selected) */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled)) { +:host([variant='black']:not([quiet]):not([disabled])) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-default, rgba(0, 0, 0, 0.4) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled) */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):hover) { +:host([variant='black']:not([quiet]):not([disabled]):hover) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-hover, rgba(0, 0, 0, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):hover */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled)[active]) { +:host([variant='black']:not([quiet]):not([disabled])[active]) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-down, rgba(0, 0, 0, 0.7) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):active */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled).focus-visible) { +:host([variant='black']:not([quiet]):not([disabled]).focus-visible) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-key-focus, rgba(0, 0, 0, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):focus-visible) { +:host([variant='black']:not([quiet]):not([disabled]):focus-visible) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-key-focus, rgba(0, 0, 0, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled).is-keyboardFocused) { +:host([variant='black']:not([quiet]):not([disabled]).is-keyboardFocused) { border-color: var( --spectrum-alias-actionbutton-staticBlack-border-color-key-focus, rgba(0, 0, 0, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected])) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected])) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-default, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected) */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]):hover) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected]):hover) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-hover, rgba(0, 0, 0, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):hover */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected])[active]) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected])[active]) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-down, rgba(0, 0, 0, 0.4) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):active */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]).focus-visible) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected]).focus-visible) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-key-focus, rgba(0, 0, 0, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]):focus-visible) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected]):focus-visible) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-key-focus, rgba(0, 0, 0, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]).is-keyboardFocused) { +:host([variant='black']:not([quiet]):not([disabled]):not([selected]).is-keyboardFocused) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-key-focus, rgba(0, 0, 0, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:disabled) { +:host([variant='black'][quiet][disabled]) { border-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:disabled */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:disabled:not([selected])) { +:host([variant='black'][quiet][disabled]:not([selected])) { background-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:disabled:not(.is-selected) */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled)) { +:host([variant='black'][quiet]:not([disabled])) { border-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled) */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected])) { +:host([variant='black'][quiet]:not([disabled]):not([selected])) { background-color: var( --spectrum-alias-component-background-color-quiet-default, var(--spectrum-alias-background-color-transparent) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected) */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]):hover) { +:host([variant='black'][quiet]:not([disabled]):not([selected]):hover) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):hover */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected])[active]) { +:host([variant='black'][quiet]:not([disabled]):not([selected])[active]) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):active */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]).focus-visible) { +:host([variant='black'][quiet]:not([disabled]):not([selected]).focus-visible) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]):focus-visible) { +:host([variant='black'][quiet]:not([disabled]):not([selected]):focus-visible) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]).is-keyboardFocused) { +:host([variant='black'][quiet]:not([disabled]):not([selected]).is-keyboardFocused) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticBlack:disabled[selected]) { +:host([size][variant='black'][disabled][selected]) { background-color: var( --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected, rgba(0, 0, 0, 0.1) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected */ } -:host(.spectrum-ActionButton--staticBlack:disabled[selected]) - .spectrum-ActionButton-holdIcon { +:host([size][variant='black'][disabled][selected]) .hold-affordance { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:disabled[selected]) #label { +:host([size][variant='black'][disabled][selected]) #label { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:disabled[selected]) - ::slotted([slot='icon']) { +:host([size][variant='black'][disabled][selected]) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:disabled) - .spectrum-ActionButton-holdIcon { +:host([variant='black'][disabled]) .hold-affordance { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:disabled) #label { +:host([variant='black'][disabled]) #label { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:disabled) ::slotted([slot='icon']) { +:host([variant='black'][disabled]) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) { +:host([variant='black'][selected]:not([disabled])) { background-color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled):hover) { +:host([variant='black'][selected]:not([disabled]):hover) { background-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):hover */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)[active]) { +:host([variant='black'][selected]:not([disabled])[active]) { background-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):active */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled).focus-visible) { +:host([variant='black'][selected]:not([disabled]).focus-visible) { background-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled):focus-visible) { +:host([variant='black'][selected]:not([disabled]):focus-visible) { background-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled).is-keyboardFocused) { +:host([variant='black'][selected]:not([disabled]).is-keyboardFocused) { background-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) - .spectrum-ActionButton-holdIcon { +:host([variant='black'][selected]:not([disabled])) .hold-affordance { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) #label { +:host([variant='black'][selected]:not([disabled])) #label { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) - ::slotted([slot='icon']) { +:host([variant='black'][selected]:not([disabled])) ::slotted([slot='icon']) { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected:not(:disabled) .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack) .spectrum-ActionButton-holdIcon { +:host([variant='black']) .hold-affordance { color: var( --spectrum-ActionButton-static-black-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected])) .hold-affordance { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected]):hover) + .hold-affordance { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) - #label { +:host([variant='black']:not([disabled]):not([selected]):hover) #label { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) +:host([variant='black']:not([disabled]):not([selected]):hover) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):hover .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected])[active]) + .hold-affordance { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) - #label { +:host([variant='black']:not([disabled]):not([selected])[active]) #label { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) +:host([variant='black']:not([disabled]):not([selected])[active]) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):active .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected]).focus-visible) + .hold-affordance { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected]):focus-visible) + .hold-affordance { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) - #label { +:host([variant='black']:not([disabled]):not([selected]).focus-visible) #label { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) - #label { +:host([variant='black']:not([disabled]):not([selected]):focus-visible) #label { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) +:host([variant='black']:not([disabled]):not([selected]).focus-visible) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) +:host([variant='black']:not([disabled]):not([selected]):focus-visible) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) - .spectrum-ActionButton-holdIcon { +:host([variant='black']:not([disabled]):not([selected]).is-keyboardFocused) + .hold-affordance { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) +:host([variant='black']:not([disabled]):not([selected]).is-keyboardFocused) #label { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) +:host([variant='black']:not([disabled]):not([selected]).is-keyboardFocused) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) - #label { +:host([variant='black']:not([disabled]):not([selected])) #label { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) +:host([variant='black']:not([disabled]):not([selected])) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-black-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack:not(:disabled):not(.is-selected) .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticBlack) #label { +:host([variant='black']) #label { color: var( --spectrum-ActionButton-static-black-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticBlack) ::slotted([slot='icon']) { +:host([variant='black']) ::slotted([slot='icon']) { color: var( --spectrum-ActionButton-static-black-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticBlack .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled) { +:host([variant='white']:not([quiet])[disabled]) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-disabled, hsla(0, 0%, 100%, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled[selected]) { +:host([variant='white']:not([quiet])[disabled][selected]) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled.is-selected */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled:not([selected])) { +:host([variant='white']:not([quiet])[disabled]:not([selected])) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-disabled, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):disabled:not(.is-selected) */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled)) { +:host([variant='white']:not([quiet]):not([disabled])) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-default, hsla(0, 0%, 100%, 0.4) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled) */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):hover) { +:host([variant='white']:not([quiet]):not([disabled]):hover) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-hover, hsla(0, 0%, 100%, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):hover */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled)[active]) { +:host([variant='white']:not([quiet]):not([disabled])[active]) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-down, hsla(0, 0%, 100%, 0.7) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):active */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled).focus-visible) { +:host([variant='white']:not([quiet]):not([disabled]).focus-visible) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-key-focus, hsla(0, 0%, 100%, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):focus-visible) { +:host([variant='white']:not([quiet]):not([disabled]):focus-visible) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-key-focus, hsla(0, 0%, 100%, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled).is-keyboardFocused) { +:host([variant='white']:not([quiet]):not([disabled]).is-keyboardFocused) { border-color: var( --spectrum-alias-actionbutton-staticWhite-border-color-key-focus, hsla(0, 0%, 100%, 0.55) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected])) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected])) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-default, transparent ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected) */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]):hover) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected]):hover) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-hover, hsla(0, 0%, 100%, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):hover */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected])[active]) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected])[active]) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-down, hsla(0, 0%, 100%, 0.4) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):active */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]).focus-visible) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected]).focus-visible) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-key-focus, hsla(0, 0%, 100%, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]):focus-visible) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected]):focus-visible) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-key-focus, hsla(0, 0%, 100%, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]).is-keyboardFocused) { +:host([variant='white']:not([quiet]):not([disabled]):not([selected]).is-keyboardFocused) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-key-focus, hsla(0, 0%, 100%, 0.25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(.spectrum-ActionButton--quiet):not(:disabled):not(.is-selected).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:disabled) { +:host([variant='white'][quiet][disabled]) { border-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:disabled */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:disabled:not([selected])) { +:host([variant='white'][quiet][disabled]:not([selected])) { background-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:disabled:not(.is-selected) */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled)) { +:host([variant='white'][quiet]:not([disabled])) { border-color: transparent; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled) */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected])) { +:host([variant='white'][quiet]:not([disabled]):not([selected])) { background-color: var( --spectrum-alias-component-background-color-quiet-default, var(--spectrum-alias-background-color-transparent) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected) */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]):hover) { +:host([variant='white'][quiet]:not([disabled]):not([selected]):hover) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):hover */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected])[active]) { +:host([variant='white'][quiet]:not([disabled]):not([selected])[active]) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):active */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]).focus-visible) { +:host([variant='white'][quiet]:not([disabled]):not([selected]).focus-visible) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]):focus-visible) { +:host([variant='white'][quiet]:not([disabled]):not([selected]):focus-visible) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]).is-keyboardFocused) { +:host([variant='white'][quiet]:not([disabled]):not([selected]).is-keyboardFocused) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-25) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet:not(:disabled):not(.is-selected).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticWhite:disabled[selected]) { +:host([variant='white'][disabled][selected]) { background-color: var( --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected, hsla(0, 0%, 100%, 0.1) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected */ } -:host(.spectrum-ActionButton--staticWhite:disabled[selected]) - .spectrum-ActionButton-holdIcon { +:host([variant='white'][disabled][selected]) .hold-affordance { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:disabled[selected]) #label { +:host([variant='white'][disabled][selected]) #label { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:disabled[selected]) - ::slotted([slot='icon']) { +:host([variant='white'][disabled][selected]) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled.is-selected .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:disabled) - .spectrum-ActionButton-holdIcon { +:host([variant='white'][disabled]) .hold-affordance { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:disabled) #label { +:host([variant='white'][disabled]) #label { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:disabled) ::slotted([slot='icon']) { +:host([variant='white'][disabled]) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-40) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) { +:host([variant='white'][selected]:not([disabled])) { background-color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled):hover) { +:host([variant='white'][selected]:not([disabled]):hover) { background-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):hover */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)[active]) { +:host([variant='white'][selected]:not([disabled])[active]) { background-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):active */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled).focus-visible) { +:host([variant='white'][selected]:not([disabled]).focus-visible) { background-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled):focus-visible) { +:host([variant='white'][selected]:not([disabled]):focus-visible) { background-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled):focus-visible */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled).is-keyboardFocused) { +:host([variant='white'][selected]:not([disabled]).is-keyboardFocused) { background-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled).is-keyboardFocused */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) - .spectrum-ActionButton-holdIcon { +:host([variant='white'][selected]:not([disabled])) .hold-affordance { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) #label { +:host([variant='white'][selected]:not([disabled])) #label { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) - ::slotted([slot='icon']) { +:host([variant='white'][selected]:not([disabled])) ::slotted([slot='icon']) { color: inherit; /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected:not(:disabled) .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite) .spectrum-ActionButton-holdIcon { +:host([variant='white']) .hold-affordance { color: var( --spectrum-ActionButton-static-white-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected])) .hold-affordance { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected]):hover) + .hold-affordance { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) - #label { +:host([variant='white']:not([disabled]):not([selected]):hover) #label { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) +:host([variant='white']:not([disabled]):not([selected]):hover) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):hover .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected])[active]) + .hold-affordance { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) - #label { +:host([variant='white']:not([disabled]):not([selected])[active]) #label { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) +:host([variant='white']:not([disabled]):not([selected])[active]) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):active .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected]).focus-visible) + .hold-affordance { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected]):focus-visible) + .hold-affordance { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) - #label { +:host([variant='white']:not([disabled]):not([selected]).focus-visible) #label { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) - #label { +:host([variant='white']:not([disabled]):not([selected]):focus-visible) #label { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) +:host([variant='white']:not([disabled]):not([selected]).focus-visible) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) +:host([variant='white']:not([disabled]):not([selected]):focus-visible) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected):focus-visible .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) - .spectrum-ActionButton-holdIcon { +:host([variant='white']:not([disabled]):not([selected]).is-keyboardFocused) + .hold-affordance { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-holdIcon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) +:host([variant='white']:not([disabled]):not([selected]).is-keyboardFocused) #label { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) +:host([variant='white']:not([disabled]):not([selected]).is-keyboardFocused) ::slotted([slot='icon']) { color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected).is-keyboardFocused .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) - #label { +:host([variant='white']:not([disabled]):not([selected])) #label { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) +:host([variant='white']:not([disabled]):not([selected])) ::slotted([slot='icon']) { color: rgba( var(--spectrum-global-color-static-white-rgb), var(--spectrum-global-color-opacity-90) ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite:not(:disabled):not(.is-selected) .spectrum-Icon */ } -:host(.spectrum-ActionButton--staticWhite) #label { +:host([variant='white']) #label { color: var( --spectrum-ActionButton-static-white-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-ActionButton-label */ } -:host(.spectrum-ActionButton--staticWhite) ::slotted([slot='icon']) { +:host([variant='white']) ::slotted([slot='icon']) { color: var( --spectrum-ActionButton-static-white-color ); /* .spectrum-ActionButton.spectrum-ActionButton--staticWhite .spectrum-Icon */ @@ -1222,7 +1200,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='rtl']) slot[name='icon'] + #label { padding-left: 0; /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon+.spectrum-ActionButton-label */ } -#hold-affordance + ::slotted([slot='icon']), +.hold-affordance + ::slotted([slot='icon']), :host([dir]) slot[icon-only] sp-icon, :host([dir]) slot[icon-only]::slotted([slot='icon']) { margin-left: calc( @@ -1244,17 +1222,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ text-overflow: ellipsis; white-space: nowrap; /* .spectrum-ActionButton-label */ } -:host([dir='ltr']) #hold-affordance { +:host([dir='ltr']) .hold-affordance { right: var( --spectrum-actionbutton-textonly-hold-icon-padding-right ); /* [dir=ltr] .spectrum-ActionButton-hold */ } -:host([dir='rtl']) #hold-affordance { +:host([dir='rtl']) .hold-affordance { left: var( --spectrum-actionbutton-textonly-hold-icon-padding-right ); /* [dir=rtl] .spectrum-ActionButton-hold */ } -:host([dir='rtl']) #hold-affordance { +:host([dir='rtl']) .hold-affordance { transform: matrix( -1, 0, @@ -1264,7 +1242,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ 0 ); /* [dir=rtl] .spectrum-ActionButton-hold */ } -#hold-affordance { +.hold-affordance { bottom: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom); position: absolute; /* .spectrum-ActionButton-hold */ } @@ -1327,21 +1305,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color); /* .spectrum-ActionButton.focus-ring:after */ } -.spectrum-ActionButton--staticWhite { +:host([variant='white']) { --spectrum-actionbutton-focus-ring-color: var( --spectrum-global-color-static-white, #fff ); /* .spectrum-ActionButton--staticWhite */ } -.spectrum-ActionButton--staticBlack { +:host([variant='black']) { --spectrum-actionbutton-focus-ring-color: var( --spectrum-global-color-static-black, #000 ); /* .spectrum-ActionButton--staticBlack */ } -.spectrum-ActionButton--staticBlack, -.spectrum-ActionButton--staticWhite, -:host([emphasized][selected]) { +:host([emphasized][selected]), +:host([variant='black']), +:host([variant='white']) { --spectrum-actionbutton-focus-ring-gap: var( --spectrum-alias-component-focusring-gap-emphasized, var(--spectrum-global-dimension-static-size-25) @@ -1373,7 +1351,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-icon-color-default) ); /* .spectrum-ActionButton .spectrum-Icon */ } -#hold-affordance { +.hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color, var(--spectrum-alias-component-icon-color-default) @@ -1399,7 +1377,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-icon-color-hover) ); /* .spectrum-ActionButton:hover .spectrum-Icon */ } -:host(:hover) #hold-affordance { +:host(:hover) .hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color-hover, var(--spectrum-alias-component-icon-color-hover) @@ -1457,13 +1435,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-icon-color-key-focus) ); /* .spectrum-ActionButton.focus-ring .spectrum-Icon */ } -:host(.focus-visible) #hold-affordance { +:host(.focus-visible) .hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color-key-focus, var(--spectrum-alias-component-icon-color-key-focus) ); /* .spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold */ } -:host(:focus-visible) #hold-affordance { +:host(:focus-visible) .hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color-key-focus, var(--spectrum-alias-component-icon-color-key-focus) @@ -1483,13 +1461,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-down) ); } -:host([active]) #hold-affordance { +:host([active]) .hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color-down, var(--spectrum-alias-component-icon-color-down) ); /* .spectrum-ActionButton:active .spectrum-ActionButton-hold */ } -:host(:disabled), +:host([disabled]), :host([disabled]) { background-color: var( --spectrum-actionbutton-m-textonly-background-color-disabled, @@ -1505,7 +1483,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-disabled) ); } -:host(:disabled) ::slotted([slot='icon']), +:host([disabled]) ::slotted([slot='icon']), :host([disabled]) ::slotted([slot='icon']) { color: var( --spectrum-actionbutton-m-texticon-icon-color-disabled, @@ -1513,8 +1491,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); /* .spectrum-ActionButton:disabled .spectrum-Icon, * .spectrum-ActionButton.is-disabled .spectrum-Icon */ } -:host(:disabled) #hold-affordance, -:host([disabled]) #hold-affordance { +:host([disabled]) .hold-affordance, +:host([disabled]) .hold-affordance { color: var( --spectrum-actionbutton-m-textonly-hold-icon-color-disabled, var(--spectrum-alias-component-icon-color-disabled) @@ -1633,7 +1611,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-icon-color-selected) ); /* .spectrum-ActionButton.is-selected:active .spectrum-Icon */ } -:host([selected]:disabled), +:host([selected][disabled]), :host([selected][disabled]) { background-color: var( --spectrum-actionbutton-m-textonly-background-color-selected-disabled, @@ -1649,7 +1627,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-disabled) ); } -:host([selected]:disabled) ::slotted([slot='icon']), +:host([selected][disabled]) ::slotted([slot='icon']), :host([selected][disabled]) ::slotted([slot='icon']) { color: var( --spectrum-actionbutton-m-texticon-icon-color-selected-disabled, @@ -1791,9 +1769,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); /* .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon, * .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon */ } -:host([emphasized][quiet][selected]:disabled), :host([emphasized][quiet][selected][disabled]), -:host([emphasized][selected]:disabled), +:host([emphasized][quiet][selected][disabled]), :host([emphasized][selected][disabled]) { background-color: var( --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled, @@ -1811,9 +1788,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-disabled) ); } -:host([emphasized][quiet][selected]:disabled) ::slotted([slot='icon']), :host([emphasized][quiet][selected][disabled]) ::slotted([slot='icon']), -:host([emphasized][selected]:disabled) ::slotted([slot='icon']), +:host([emphasized][quiet][selected][disabled]) ::slotted([slot='icon']), :host([emphasized][selected][disabled]) ::slotted([slot='icon']) { color: var( --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled, @@ -1893,7 +1869,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-down) ); } -:host([quiet]:disabled), +:host([quiet][disabled]), :host([quiet][disabled]) { background-color: var( --spectrum-actionbutton-m-quiet-textonly-background-color-disabled, @@ -1983,7 +1959,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-selected-down) ); } -:host([quiet][selected]:disabled), +:host([quiet][selected][disabled]), :host([quiet][selected][disabled]) { background-color: var( --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled, @@ -1999,8 +1975,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-disabled) ); } -.spectrum-ActionButton--staticBlack, -.spectrum-ActionButton--staticWhite { +:host([variant='black']), +:host([variant='white']) { --spectrum-global-color-static-black-rgb: 0, 0, 0; /* .spectrum-ActionButton--staticBlack, * .spectrum-ActionButton--staticWhite */ --spectrum-global-color-static-white-rgb: 255, 255, 255; @@ -2013,8 +1989,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #fff ); } -:host([selected]) .spectrum-ActionButton--staticBlack, -:host([selected]) .spectrum-ActionButton--staticWhite { +:host([variant='black'][selected]), +:host([variant='white'][selected]) { color: inherit !important; /* .spectrum-ActionButton--staticBlack.is-selected, * .spectrum-ActionButton--staticWhite.is-selected */ } @@ -2116,7 +2092,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-actionbutton-m-textonly-text-color-selected-key-focus: HighlightText; forced-color-adjust: none; } - :host([quiet][emphasized]:not(:disabled, [disabled]):hover) { + :host([quiet][emphasized]:not([disabled]):hover) { background-color: var( --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover, var( @@ -2134,7 +2110,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ var(--spectrum-alias-component-text-color-emphasized-selected-hover) ); } - :host([quiet][emphasized]:not(:disabled, [disabled])[active]) { + :host([quiet][emphasized]:not([disabled])[active]) { background-color: var( --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down, var( diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js index 3e21f88ca4..93cee9e985 100644 --- a/packages/action-button/src/spectrum-config.js +++ b/packages/action-button/src/spectrum-config.js @@ -28,6 +28,11 @@ const config = { selector: '.is-disabled', name: 'disabled', }, + { + type: 'boolean', + selector: ':disabled', + name: 'disabled', + }, { type: 'boolean', name: 'selected', @@ -48,6 +53,20 @@ const config = { name: 'emphasized', selector: '.spectrum-ActionButton--emphasized', }, + { + type: 'enum', + name: 'variant', + values: [ + { + name: 'white', + selector: '.spectrum-ActionButton--staticWhite', + }, + { + name: 'black', + selector: '.spectrum-ActionButton--staticBlack', + }, + ], + }, { type: 'enum', name: 'size', @@ -71,13 +90,17 @@ const config = { ], }, ], - ids: [ - '.spectrum-ActionButton-label', + classes: [ { name: 'hold-affordance', selector: '.spectrum-ActionButton-hold', }, + { + name: 'hold-affordance', + selector: '.spectrum-ActionButton-holdIcon', + }, ], + ids: ['.spectrum-ActionButton-label'], slots: [ { name: 'icon', @@ -101,6 +124,12 @@ const config = { ":host([dir=rtl]) slot:not([icon-only])::slotted([slot='icon']), :host([dir=rtl]) slot:not([icon-only]) sp-icon", selector: /\:host\(\[dir=rtl\]\) \.spectrum-Icon$/, }, + { + replacement: + ':host([size][variant="black"][disabled][selected])', + selector: + '.spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled.is-selected', + }, ], }, ], diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css index d5dbf12b5a..5a748603df 100644 --- a/packages/action-group/src/action-group.css +++ b/packages/action-group/src/action-group.css @@ -68,40 +68,93 @@ governing permissions and limitations under the License. :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ - --overriden-border-radius: var(--spectrum-alias-border-radius-regular) - var(--spectrum-alias-border-radius-regular) 0 0; + --overriden-border-radius: var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius) 0 0; } :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - --overriden-border-radius: 0 0 var(--spectrum-alias-border-radius-regular) - var(--spectrum-alias-border-radius-regular); + --overriden-border-radius: 0 0 var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius); } :host([dir='ltr'][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ - --overriden-border-radius: var(--spectrum-alias-border-radius-regular) 0 0 - var(--spectrum-alias-border-radius-regular); + --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0 + var(--spectrum-alias-component-border-radius); } :host([dir='rtl'][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ - --overriden-border-radius: 0 var(--spectrum-alias-border-radius-regular) - var(--spectrum-alias-border-radius-regular) 0; + --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius) 0; } :host([dir='ltr'][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child) { /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - --overriden-border-radius: 0 var(--spectrum-alias-border-radius-regular) - var(--spectrum-alias-border-radius-regular) 0; + --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius) 0; } :host([dir='rtl'][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child) { /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ - --overriden-border-radius: var(--spectrum-alias-border-radius-regular) 0 0 - var(--spectrum-alias-border-radius-regular); + --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0 + var(--spectrum-alias-component-border-radius); +} + +:host([compact]:not([quiet])) ::slotted(*) { + --spectrum-actionbutton-after-border-radius: 0; +} + +:host([compact][vertical]:not([quiet])) ::slotted(:first-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + --spectrum-actionbutton-after-border-radius: var( + --spectrum-alias-component-border-radius + ) + var(--spectrum-alias-component-border-radius) 0 0; +} + +:host([compact][vertical]:not([quiet])) ::slotted(:last-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + --spectrum-actionbutton-after-border-radius: 0 0 + var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius); +} + +:host([dir='ltr'][compact]:not([quiet]):not([vertical])) + ::slotted(:first-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + --spectrum-actionbutton-after-border-radius: var( + --spectrum-alias-component-border-radius + ) + 0 0 var(--spectrum-alias-component-border-radius); +} + +:host([dir='rtl'][compact]:not([quiet]):not([vertical])) + ::slotted(:first-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */ + --spectrum-actionbutton-after-border-radius: 0 + var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius) 0; +} + +:host([dir='ltr'][compact]:not([quiet]):not([vertical])) + ::slotted(:last-child) { + /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + --spectrum-actionbutton-after-border-radius: 0 + var(--spectrum-alias-component-border-radius) + var(--spectrum-alias-component-border-radius) 0; +} + +:host([dir='rtl'][compact]:not([quiet]):not([vertical])) + ::slotted(:last-child) { + /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */ + --spectrum-actionbutton-after-border-radius: var( + --spectrum-alias-component-border-radius + ) + 0 0 var(--spectrum-alias-component-border-radius); } diff --git a/packages/button/package.json b/packages/button/package.json index b9ebfa35b7..c196bbb063 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -47,13 +47,14 @@ ], "dependencies": { "@spectrum-web-components/base": "^0.5.2", + "@spectrum-web-components/clear-button": "^0.0.1", "@spectrum-web-components/icon": "^0.11.3", "@spectrum-web-components/icons-ui": "^0.8.3", "@spectrum-web-components/shared": "^0.13.4", "tslib": "^2.0.0" }, "devDependencies": { - "@spectrum-css/button": "^4.1.4" + "@spectrum-css/button": "^6.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts index 4370619c08..9a79156e9b 100644 --- a/packages/button/src/Button.ts +++ b/packages/button/src/Button.ts @@ -10,17 +10,34 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { CSSResultArray, SizedMixin } from '@spectrum-web-components/base'; +import { + CSSResultArray, + PropertyValues, + SizedMixin, +} from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; import { StyledButton } from './StyledButton.js'; import buttonStyles from './button.css.js'; +export type DeprecatedButtonVariants = 'cta' | 'overBackground'; +export type ButtonStatics = 'white' | 'black'; export type ButtonVariants = - | 'cta' - | 'overBackground' + | 'accent' | 'primary' | 'secondary' - | 'negative'; + | 'negative' + | ButtonStatics + | DeprecatedButtonVariants; +export const VALID_VARIANTS = [ + 'accent', + 'primary', + 'secondary', + 'negative', + 'white', + 'black', +]; + +export type ButtonTreatments = 'fill' | 'outline'; /** * @element sp-button @@ -37,17 +54,51 @@ export class Button extends SizedMixin(StyledButton) { * The visual variant to apply to this button. */ @property({ reflect: true }) - public variant: ButtonVariants = 'cta'; + public get variant(): ButtonVariants { + return this._variant; + } + public set variant(variant: ButtonVariants) { + if (variant === this.variant) return; + + this.requestUpdate('variant', this.variant); + switch (variant) { + case 'cta': + this._variant = 'accent'; + break; + case 'overBackground': + this._variant = 'white'; + this.treatment = 'outline'; + break; + default: + if (!VALID_VARIANTS.includes(variant)) { + this._variant = 'accent'; + } else { + this._variant = variant; + } + break; + } + this.setAttribute('variant', this.variant); + } + private _variant: ButtonVariants = 'accent'; /** - * There is a warning in place for this control + * The visual variant to apply to this button. */ - @property({ type: Boolean, reflect: true }) - public warning = false; + @property({ reflect: true }) + public treatment: ButtonTreatments = 'fill'; /** * Style this button to be less obvious */ - @property({ type: Boolean, reflect: true }) - public quiet = false; + @property({ type: Boolean }) + public set quiet(quiet: boolean) { + this.treatment = quiet ? 'outline' : 'fill'; + } + + protected firstUpdated(changes: PropertyValues): void { + super.firstUpdated(changes); + if (!this.hasAttribute('variant')) { + this.setAttribute('variant', this.variant); + } + } } diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index ac6d0fef32..f07c7d681e 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -18,7 +18,7 @@ import { } from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; import { StyledButton } from './StyledButton.js'; -import buttonStyles from './clear-button.css.js'; +import buttonStyles from '@spectrum-web-components/clear-button/src/clear-button.css.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js'; import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js'; diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 3035ed1c04..bd0d72dc05 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -29,9 +29,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ ); margin: 0; overflow: visible; - position: relative; /* .spectrum-LogicButton, - * .spectrum-ClearButton, - * .spectrum-Button */ + position: relative; /* .spectrum-Button */ text-decoration: none; text-transform: none; transition: background var(--spectrum-global-animation-duration-100, 0.13s) @@ -45,23 +43,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ vertical-align: top; } :host(:focus) { - outline: none; /* .spectrum-LogicButton:focus, - * .spectrum-ClearButton:focus, - * .spectrum-Button:focus */ + outline: none; /* .spectrum-Button:focus */ } :host(::-moz-focus-inner) { - border: 0; /* .spectrum-LogicButton::-moz-focus-inner, - * .spectrum-ClearButton::-moz-focus-inner, - * .spectrum-Button::-moz-focus-inner */ + border: 0; /* .spectrum-Button::-moz-focus-inner */ border-style: none; margin-bottom: -2px; margin-top: -2px; padding: 0; } -:host(:disabled) { - cursor: default; /* .spectrum-LogicButton:disabled, - * .spectrum-ClearButton:disabled, - * .spectrum-Button:disabled */ +:host([disabled]) { + cursor: default; /* .spectrum-Button:disabled */ } ::slotted([slot='icon']) { flex-shrink: 0; @@ -69,13 +61,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } :host:after { border-radius: calc( - var(--spectrum-button-primary-texticon-border-radius) + + var( + --spectrum-button-m-primary-fill-texticon-border-radius, + var(--spectrum-global-dimension-size-200) + ) + var( --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) - ); /* .spectrum-LogicButton:after, - * .spectrum-Button:after */ + ); /* .spectrum-Button:after */ bottom: 0; content: ''; display: block; @@ -99,8 +93,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * -2 - ); /* .spectrum-LogicButton.focus-ring:after, - * .spectrum-Button.focus-ring:after */ + ); /* .spectrum-Button.focus-ring:after */ } :host(:focus-visible):after { margin: calc( @@ -108,8 +101,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ --spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25) ) * -2 - ); /* .spectrum-LogicButton.focus-ring:after, - * .spectrum-Button.focus-ring:after */ + ); /* .spectrum-Button.focus-ring:after */ } #label { align-self: center; /* .spectrum-Button-label */ @@ -120,296 +112,301 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ display: none; /* .spectrum-Button-label:empty */ } :host([size='s']) { - --spectrum-button-primary-textonly-text-padding-bottom: var( - --spectrum-button-s-primary-textonly-text-padding-bottom + --spectrum-button-primary-fill-textonly-text-padding-bottom: var( + --spectrum-button-s-primary-fill-textonly-text-padding-bottom ); /* .spectrum-Button--sizeS */ - --spectrum-button-primary-texticon-text-size: var( - --spectrum-button-s-primary-texticon-text-size, + --spectrum-button-primary-fill-texticon-text-size: var( + --spectrum-button-s-primary-fill-texticon-text-size, var(--spectrum-global-dimension-font-size-75) ); - --spectrum-button-primary-texticon-text-font-weight: var( - --spectrum-button-s-primary-texticon-text-font-weight, + --spectrum-button-primary-fill-texticon-text-font-weight: var( + --spectrum-button-s-primary-fill-texticon-text-font-weight, var(--spectrum-global-font-weight-bold) ); - --spectrum-button-primary-texticon-text-line-height: var( - --spectrum-button-s-primary-texticon-text-line-height, + --spectrum-button-primary-fill-texticon-text-line-height: var( + --spectrum-button-s-primary-fill-texticon-text-line-height, var(--spectrum-alias-component-text-line-height) ); - --spectrum-button-primary-texticon-icon-gap: var( - --spectrum-button-s-primary-texticon-icon-gap, + --spectrum-button-primary-fill-texticon-icon-gap: var( + --spectrum-button-s-primary-fill-texticon-icon-gap, var(--spectrum-global-dimension-size-85) ); - --spectrum-button-primary-texticon-focus-ring-size: var( - --spectrum-button-s-primary-texticon-focus-ring-size, + --spectrum-button-primary-fill-texticon-focus-ring-size: var( + --spectrum-button-s-primary-fill-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size) ); - --spectrum-button-primary-texticon-border-size: var( - --spectrum-button-s-primary-texticon-border-size, + --spectrum-button-primary-fill-texticon-border-size: var( + --spectrum-button-s-primary-fill-texticon-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-texticon-border-radius: var( - --spectrum-button-s-primary-texticon-border-radius, - var(--spectrum-global-dimension-size-150) - ); - --spectrum-button-primary-texticon-padding-left: var( - --spectrum-button-s-primary-texticon-padding-left, + --spectrum-button-primary-fill-texticon-padding-left: var( + --spectrum-button-s-primary-fill-texticon-padding-left, var(--spectrum-global-dimension-size-125) ); - --spectrum-button-primary-textonly-border-size: var( - --spectrum-button-s-primary-textonly-border-size, + --spectrum-button-primary-fill-texticon-border-radius: var( + --spectrum-button-s-primary-fill-texticon-border-radius, + var(--spectrum-global-dimension-size-150) + ); + --spectrum-button-primary-fill-textonly-border-size: var( + --spectrum-button-s-primary-fill-textonly-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-textonly-min-width: var( - --spectrum-button-s-primary-textonly-min-width, + --spectrum-button-primary-fill-textonly-min-width: var( + --spectrum-button-s-primary-fill-textonly-min-width, var(--spectrum-global-dimension-size-675) ); - --spectrum-button-primary-textonly-padding-right: var( - --spectrum-button-s-primary-textonly-padding-right, + --spectrum-button-primary-fill-textonly-padding-left: var( + --spectrum-button-s-primary-fill-textonly-padding-left, var(--spectrum-global-dimension-size-150) ); - --spectrum-button-primary-textonly-padding-left: var( - --spectrum-button-s-primary-textonly-padding-left, + --spectrum-button-primary-fill-textonly-padding-right: var( + --spectrum-button-s-primary-fill-textonly-padding-right, var(--spectrum-global-dimension-size-150) ); - --spectrum-button-primary-textonly-height: var( - --spectrum-button-s-primary-textonly-height, + --spectrum-button-primary-fill-textonly-height: var( + --spectrum-button-s-primary-fill-textonly-height, var(--spectrum-global-dimension-size-300) ); - --spectrum-button-primary-textonly-text-padding-top: calc( + --spectrum-button-primary-fill-textonly-text-padding-top: calc( var( - --spectrum-button-s-primary-textonly-text-padding-top, + --spectrum-button-s-primary-fill-textonly-text-padding-top, var(--spectrum-global-dimension-static-size-50) ) - 1px ); } :host([size='m']) { - --spectrum-button-primary-texticon-padding-left: var( - --spectrum-button-m-primary-texticon-padding-left + --spectrum-button-primary-fill-texticon-padding-left: var( + --spectrum-button-m-primary-fill-texticon-padding-left ); /* .spectrum-Button--sizeM */ - --spectrum-button-primary-texticon-text-size: var( - --spectrum-button-m-primary-texticon-text-size, + --spectrum-button-primary-fill-texticon-text-size: var( + --spectrum-button-m-primary-fill-texticon-text-size, var(--spectrum-global-dimension-font-size-100) ); - --spectrum-button-primary-texticon-text-font-weight: var( - --spectrum-button-m-primary-texticon-text-font-weight, + --spectrum-button-primary-fill-texticon-text-font-weight: var( + --spectrum-button-m-primary-fill-texticon-text-font-weight, var(--spectrum-global-font-weight-bold) ); - --spectrum-button-primary-texticon-text-line-height: var( - --spectrum-button-m-primary-texticon-text-line-height, + --spectrum-button-primary-fill-texticon-text-line-height: var( + --spectrum-button-m-primary-fill-texticon-text-line-height, var(--spectrum-alias-component-text-line-height) ); - --spectrum-button-primary-texticon-icon-gap: var( - --spectrum-button-m-primary-texticon-icon-gap, + --spectrum-button-primary-fill-texticon-icon-gap: var( + --spectrum-button-m-primary-fill-texticon-icon-gap, var(--spectrum-global-dimension-size-100) ); - --spectrum-button-primary-texticon-focus-ring-size: var( - --spectrum-button-m-primary-texticon-focus-ring-size, + --spectrum-button-primary-fill-texticon-focus-ring-size: var( + --spectrum-button-m-primary-fill-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size) ); - --spectrum-button-primary-texticon-border-size: var( - --spectrum-button-m-primary-texticon-border-size, + --spectrum-button-primary-fill-texticon-border-size: var( + --spectrum-button-m-primary-fill-texticon-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-texticon-border-radius: var( - --spectrum-button-m-primary-texticon-border-radius, + --spectrum-button-primary-fill-texticon-border-radius: var( + --spectrum-button-m-primary-fill-texticon-border-radius, var(--spectrum-global-dimension-size-200) ); - --spectrum-button-primary-textonly-text-padding-top: var( - --spectrum-button-m-primary-textonly-text-padding-top, + --spectrum-button-primary-fill-textonly-text-padding-top: var( + --spectrum-button-m-primary-fill-textonly-text-padding-top, var(--spectrum-global-dimension-size-75) ); - --spectrum-button-primary-textonly-border-size: var( - --spectrum-button-m-primary-textonly-border-size, + --spectrum-button-primary-fill-textonly-border-size: var( + --spectrum-button-m-primary-fill-textonly-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-textonly-min-width: var( - --spectrum-button-m-primary-textonly-min-width, + --spectrum-button-primary-fill-textonly-min-width: var( + --spectrum-button-m-primary-fill-textonly-min-width, var(--spectrum-global-dimension-size-900) ); - --spectrum-button-primary-textonly-padding-right: var( - --spectrum-button-m-primary-textonly-padding-right, + --spectrum-button-primary-fill-textonly-padding-left: var( + --spectrum-button-m-primary-fill-textonly-padding-left, var(--spectrum-global-dimension-size-200) ); - --spectrum-button-primary-textonly-padding-left: var( - --spectrum-button-m-primary-textonly-padding-left, + --spectrum-button-primary-fill-textonly-padding-right: var( + --spectrum-button-m-primary-fill-textonly-padding-right, var(--spectrum-global-dimension-size-200) ); - --spectrum-button-primary-textonly-height: var( - --spectrum-button-m-primary-textonly-height, + --spectrum-button-primary-fill-textonly-height: var( + --spectrum-button-m-primary-fill-textonly-height, var(--spectrum-global-dimension-size-400) ); - --spectrum-button-primary-textonly-text-padding-bottom: calc( + --spectrum-button-primary-fill-textonly-text-padding-bottom: calc( var( - --spectrum-button-m-primary-textonly-text-padding-bottom, + --spectrum-button-m-primary-fill-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-115) ) - 1px ); } :host([size='l']) { - --spectrum-button-primary-textonly-text-padding-top: var( - --spectrum-button-l-primary-textonly-text-padding-top + --spectrum-button-primary-fill-textonly-text-padding-top: var( + --spectrum-button-l-primary-fill-textonly-text-padding-top ); /* .spectrum-Button--sizeL */ - --spectrum-button-primary-texticon-text-size: var( - --spectrum-button-l-primary-texticon-text-size, + --spectrum-button-primary-fill-texticon-text-size: var( + --spectrum-button-l-primary-fill-texticon-text-size, var(--spectrum-global-dimension-font-size-200) ); - --spectrum-button-primary-texticon-text-font-weight: var( - --spectrum-button-l-primary-texticon-text-font-weight, + --spectrum-button-primary-fill-texticon-text-font-weight: var( + --spectrum-button-l-primary-fill-texticon-text-font-weight, var(--spectrum-global-font-weight-bold) ); - --spectrum-button-primary-texticon-text-line-height: var( - --spectrum-button-l-primary-texticon-text-line-height, + --spectrum-button-primary-fill-texticon-text-line-height: var( + --spectrum-button-l-primary-fill-texticon-text-line-height, var(--spectrum-alias-component-text-line-height) ); - --spectrum-button-primary-texticon-icon-gap: var( - --spectrum-button-l-primary-texticon-icon-gap, + --spectrum-button-primary-fill-texticon-icon-gap: var( + --spectrum-button-l-primary-fill-texticon-icon-gap, var(--spectrum-global-dimension-size-115) ); - --spectrum-button-primary-texticon-focus-ring-size: var( - --spectrum-button-l-primary-texticon-focus-ring-size, + --spectrum-button-primary-fill-texticon-focus-ring-size: var( + --spectrum-button-l-primary-fill-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size) ); - --spectrum-button-primary-texticon-border-size: var( - --spectrum-button-l-primary-texticon-border-size, + --spectrum-button-primary-fill-texticon-border-size: var( + --spectrum-button-l-primary-fill-texticon-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-texticon-border-radius: var( - --spectrum-button-l-primary-texticon-border-radius, - var(--spectrum-global-dimension-size-250) - ); - --spectrum-button-primary-texticon-padding-left: var( - --spectrum-button-l-primary-texticon-padding-left, + --spectrum-button-primary-fill-texticon-padding-left: var( + --spectrum-button-l-primary-fill-texticon-padding-left, var(--spectrum-global-dimension-size-225) ); - --spectrum-button-primary-textonly-text-padding-bottom: var( - --spectrum-button-l-primary-textonly-text-padding-bottom, + --spectrum-button-primary-fill-texticon-border-radius: var( + --spectrum-button-l-primary-fill-texticon-border-radius, + var(--spectrum-global-dimension-size-250) + ); + --spectrum-button-primary-fill-textonly-text-padding-bottom: var( + --spectrum-button-l-primary-fill-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-130) ); - --spectrum-button-primary-textonly-border-size: var( - --spectrum-button-l-primary-textonly-border-size, + --spectrum-button-primary-fill-textonly-border-size: var( + --spectrum-button-l-primary-fill-textonly-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-textonly-min-width: var( - --spectrum-button-l-primary-textonly-min-width, + --spectrum-button-primary-fill-textonly-min-width: var( + --spectrum-button-l-primary-fill-textonly-min-width, var(--spectrum-global-dimension-size-1125) ); - --spectrum-button-primary-textonly-padding-right: var( - --spectrum-button-l-primary-textonly-padding-right, + --spectrum-button-primary-fill-textonly-padding-left: var( + --spectrum-button-l-primary-fill-textonly-padding-left, var(--spectrum-global-dimension-size-250) ); - --spectrum-button-primary-textonly-padding-left: var( - --spectrum-button-l-primary-textonly-padding-left, + --spectrum-button-primary-fill-textonly-padding-right: var( + --spectrum-button-l-primary-fill-textonly-padding-right, var(--spectrum-global-dimension-size-250) ); - --spectrum-button-primary-textonly-height: var( - --spectrum-button-l-primary-textonly-height, + --spectrum-button-primary-fill-textonly-height: var( + --spectrum-button-l-primary-fill-textonly-height, var(--spectrum-global-dimension-size-500) ); } :host([size='xl']) { - --spectrum-button-primary-texticon-padding-left: var( - --spectrum-button-xl-primary-texticon-padding-left + --spectrum-button-primary-fill-texticon-padding-left: var( + --spectrum-button-xl-primary-fill-texticon-padding-left ); /* .spectrum-Button--sizeXL */ - --spectrum-button-primary-texticon-text-size: var( - --spectrum-button-xl-primary-texticon-text-size, + --spectrum-button-primary-fill-texticon-text-size: var( + --spectrum-button-xl-primary-fill-texticon-text-size, var(--spectrum-global-dimension-font-size-300) ); - --spectrum-button-primary-texticon-text-font-weight: var( - --spectrum-button-xl-primary-texticon-text-font-weight, + --spectrum-button-primary-fill-texticon-text-font-weight: var( + --spectrum-button-xl-primary-fill-texticon-text-font-weight, var(--spectrum-global-font-weight-bold) ); - --spectrum-button-primary-texticon-text-line-height: var( - --spectrum-button-xl-primary-texticon-text-line-height, + --spectrum-button-primary-fill-texticon-text-line-height: var( + --spectrum-button-xl-primary-fill-texticon-text-line-height, var(--spectrum-alias-component-text-line-height) ); - --spectrum-button-primary-texticon-icon-gap: var( - --spectrum-button-xl-primary-texticon-icon-gap, + --spectrum-button-primary-fill-texticon-icon-gap: var( + --spectrum-button-xl-primary-fill-texticon-icon-gap, var(--spectrum-global-dimension-size-125) ); - --spectrum-button-primary-texticon-focus-ring-size: var( - --spectrum-button-xl-primary-texticon-focus-ring-size, + --spectrum-button-primary-fill-texticon-focus-ring-size: var( + --spectrum-button-xl-primary-fill-texticon-focus-ring-size, var(--spectrum-alias-focus-ring-size) ); - --spectrum-button-primary-texticon-border-size: var( - --spectrum-button-xl-primary-texticon-border-size, + --spectrum-button-primary-fill-texticon-border-size: var( + --spectrum-button-xl-primary-fill-texticon-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-texticon-border-radius: var( - --spectrum-button-xl-primary-texticon-border-radius, + --spectrum-button-primary-fill-texticon-border-radius: var( + --spectrum-button-xl-primary-fill-texticon-border-radius, var(--spectrum-global-dimension-size-300) ); - --spectrum-button-primary-textonly-text-padding-top: var( - --spectrum-button-xl-primary-textonly-text-padding-top, + --spectrum-button-primary-fill-textonly-text-padding-top: var( + --spectrum-button-xl-primary-fill-textonly-text-padding-top, var(--spectrum-global-dimension-size-150) ); - --spectrum-button-primary-textonly-border-size: var( - --spectrum-button-xl-primary-textonly-border-size, + --spectrum-button-primary-fill-textonly-border-size: var( + --spectrum-button-xl-primary-fill-textonly-border-size, var(--spectrum-alias-border-size-thick) ); - --spectrum-button-primary-textonly-min-width: var( - --spectrum-button-xl-primary-textonly-min-width, + --spectrum-button-primary-fill-textonly-min-width: var( + --spectrum-button-xl-primary-fill-textonly-min-width, var(--spectrum-global-dimension-size-1250) ); - --spectrum-button-primary-textonly-padding-right: var( - --spectrum-button-xl-primary-textonly-padding-right, + --spectrum-button-primary-fill-textonly-padding-left: var( + --spectrum-button-xl-primary-fill-textonly-padding-left, var(--spectrum-global-dimension-size-300) ); - --spectrum-button-primary-textonly-padding-left: var( - --spectrum-button-xl-primary-textonly-padding-left, + --spectrum-button-primary-fill-textonly-padding-right: var( + --spectrum-button-xl-primary-fill-textonly-padding-right, var(--spectrum-global-dimension-size-300) ); - --spectrum-button-primary-textonly-height: var( - --spectrum-button-xl-primary-textonly-height, + --spectrum-button-primary-fill-textonly-height: var( + --spectrum-button-xl-primary-fill-textonly-height, var(--spectrum-global-dimension-size-600) ); - --spectrum-button-primary-textonly-text-padding-bottom: calc( + --spectrum-button-primary-fill-textonly-text-padding-bottom: calc( var( - --spectrum-button-xl-primary-textonly-text-padding-bottom, + --spectrum-button-xl-primary-fill-textonly-text-padding-bottom, var(--spectrum-global-dimension-size-175) ) - 1px ); } :host { - --spectrum-button-primary-padding-left-adjusted: calc( - var(--spectrum-button-primary-texticon-padding-left) - - var(--spectrum-button-primary-texticon-border-size) + --spectrum-button-primary-fill-padding-left-adjusted: calc( + var(--spectrum-button-primary-fill-texticon-padding-left) - + var(--spectrum-button-primary-fill-texticon-border-size) ); /* .spectrum-Button */ - --spectrum-button-primary-textonly-padding-left-adjusted: calc( - var(--spectrum-button-primary-textonly-padding-left) - - var(--spectrum-button-primary-texticon-border-size) + --spectrum-button-primary-fill-textonly-padding-left-adjusted: calc( + var(--spectrum-button-primary-fill-textonly-padding-left) - + var(--spectrum-button-primary-fill-texticon-border-size) ); - --spectrum-button-primary-textonly-padding-right-adjusted: calc( - var(--spectrum-button-primary-textonly-padding-right) - - var(--spectrum-button-primary-texticon-border-size) + --spectrum-button-primary-fill-textonly-padding-right-adjusted: calc( + var(--spectrum-button-primary-fill-textonly-padding-right) - + var(--spectrum-button-primary-fill-texticon-border-size) ); } :host([dir='ltr']) { padding-left: var( - --spectrum-button-primary-textonly-padding-left-adjusted + --spectrum-button-primary-fill-textonly-padding-left-adjusted ); /* [dir=ltr] .spectrum-Button */ padding-right: var( - --spectrum-button-primary-textonly-padding-right-adjusted + --spectrum-button-primary-fill-textonly-padding-right-adjusted ); } :host([dir='rtl']) { padding-left: var( - --spectrum-button-primary-textonly-padding-right-adjusted + --spectrum-button-primary-fill-textonly-padding-right-adjusted ); padding-right: var( - --spectrum-button-primary-textonly-padding-left-adjusted + --spectrum-button-primary-fill-textonly-padding-left-adjusted ); /* [dir=rtl] .spectrum-Button */ } :host { - border-radius: var(--spectrum-button-primary-texticon-border-radius); + --spectrum-button-focus-ring-color: var( + --spectrum-button-m-primary-fill-texticon-focus-ring-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + border-radius: var(--spectrum-button-primary-fill-texticon-border-radius); border-style: solid; border-width: var( - --spectrum-button-primary-texticon-border-size + --spectrum-button-primary-fill-texticon-border-size ); /* .spectrum-Button */ - font-size: var(--spectrum-button-primary-texticon-text-size); - font-weight: var(--spectrum-button-primary-texticon-text-font-weight); + color: inherit; + font-size: var(--spectrum-button-primary-fill-texticon-text-size); + font-weight: var(--spectrum-button-primary-fill-texticon-text-font-weight); height: auto; - min-height: var(--spectrum-button-primary-textonly-height); - min-width: var(--spectrum-button-primary-textonly-min-width); + min-height: var(--spectrum-button-primary-fill-textonly-height); + min-width: var(--spectrum-button-primary-fill-textonly-min-width); padding-bottom: 0; padding-top: 0; } @@ -421,27 +418,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir='ltr']) ::slotted([slot='icon']) { margin-left: calc( ( - var(--spectrum-button-primary-textonly-padding-left-adjusted) - - var(--spectrum-button-primary-padding-left-adjusted) + var( + --spectrum-button-primary-fill-textonly-padding-left-adjusted + ) - + var(--spectrum-button-primary-fill-padding-left-adjusted) ) * -1 ); /* [dir=ltr] .spectrum-Button .spectrum-Icon */ } :host([dir='rtl']) ::slotted([slot='icon']) { margin-right: calc( ( - var(--spectrum-button-primary-textonly-padding-left-adjusted) - - var(--spectrum-button-primary-padding-left-adjusted) + var( + --spectrum-button-primary-fill-textonly-padding-left-adjusted + ) - + var(--spectrum-button-primary-fill-padding-left-adjusted) ) * -1 ); /* [dir=rtl] .spectrum-Button .spectrum-Icon */ } :host([dir='ltr']) slot[name='icon'] + #label { padding-left: var( - --spectrum-button-primary-texticon-icon-gap + --spectrum-button-primary-fill-texticon-icon-gap ); /* [dir=ltr] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ } :host([dir='rtl']) slot[name='icon'] + #label { padding-right: var( - --spectrum-button-primary-texticon-icon-gap + --spectrum-button-primary-fill-texticon-icon-gap ); /* [dir=rtl] .spectrum-Button .spectrum-Icon+.spectrum-Button-label */ } :host([dir='ltr']) slot[name='icon'] + #label { @@ -452,1031 +453,1437 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ } #label { line-height: var( - --spectrum-button-primary-texticon-text-line-height + --spectrum-button-primary-fill-texticon-text-line-height ); /* .spectrum-Button-label */ padding-bottom: calc( - var(--spectrum-button-primary-textonly-text-padding-bottom) - - var(--spectrum-button-primary-textonly-border-size) + var(--spectrum-button-primary-fill-textonly-text-padding-bottom) - + var(--spectrum-button-primary-fill-textonly-border-size) ); padding-top: calc( - var(--spectrum-button-primary-textonly-text-padding-top) - - var(--spectrum-button-primary-textonly-border-size) + var(--spectrum-button-primary-fill-textonly-text-padding-top) - + var(--spectrum-button-primary-fill-textonly-border-size) ); } :host(.focus-visible):after, :host([focused]):after { - box-shadow: 0 0 0 var(--spectrum-button-primary-texticon-focus-ring-size) - var( - --spectrum-button-m-primary-texticon-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) - ); /* .spectrum-Button.focus-ring:after, + box-shadow: 0 0 0 + var(--spectrum-button-primary-fill-texticon-focus-ring-size) + var(--spectrum-button-focus-ring-color); /* .spectrum-Button.focus-ring:after, * .spectrum-Button.is-focused:after */ } :host(:focus-visible):after, :host([focused]):after { - box-shadow: 0 0 0 var(--spectrum-button-primary-texticon-focus-ring-size) - var( - --spectrum-button-m-primary-texticon-focus-ring-color-key-focus, - var(--spectrum-alias-focus-ring-color) - ); /* .spectrum-Button.focus-ring:after, + box-shadow: 0 0 0 + var(--spectrum-button-primary-fill-texticon-focus-ring-size) + var(--spectrum-button-focus-ring-color); /* .spectrum-Button.focus-ring:after, * .spectrum-Button.is-focused:after */ } -:host([variant='cta']) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color, - var(--spectrum-semantic-cta-background-color-default) - ); /* .spectrum-Button--cta */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color, - var(--spectrum-semantic-cta-background-color-default) - ); - color: var( - --spectrum-button-m-cta-texticon-text-color, +:host([variant='white']) { + --spectrum-button-focus-ring-color: var( + --spectrum-button-m-primary-fill-white-texticon-focus-ring-color-key-focus, var(--spectrum-global-color-static-white) - ); + ); /* .spectrum-Button--staticWhite */ } -:host([variant='cta']:hover) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color-hover, - var(--spectrum-semantic-cta-background-color-hover) - ); /* .spectrum-Button--cta:hover */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color-hover, - var(--spectrum-semantic-cta-background-color-hover) - ); - color: var( - --spectrum-button-m-cta-texticon-text-color-hover, - var(--spectrum-global-color-static-white) - ); +:host([variant='black']) { + --spectrum-button-focus-ring-color: var( + --spectrum-button-m-primary-fill-black-texticon-focus-ring-color-key-focus, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button--staticBlack */ } -:host([variant='cta'].focus-visible) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color-key-focus, - var(--spectrum-semantic-cta-background-color-hover) - ); /* .spectrum-Button--cta.focus-ring */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color-key-focus, - var(--spectrum-semantic-cta-background-color-hover) - ); - color: var( - --spectrum-button-m-cta-texticon-text-color-key-focus, - var(--spectrum-global-color-static-white) - ); +@media (forced-colors: active) { + :host { + --spectrum-button-m-accent-fill-texticon-background-color: ButtonText; + --spectrum-button-m-accent-fill-texticon-background-color-down: Highlight; + --spectrum-button-m-accent-fill-texticon-background-color-hover: Highlight; + --spectrum-button-m-accent-fill-texticon-background-color-key-focus: Highlight; + --spectrum-button-m-accent-fill-texticon-text-color: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-negative-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-negative-outline-texticon-border-color: ButtonText; + --spectrum-button-m-negative-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-negative-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-negative-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-negative-outline-texticon-text-color: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-negative-outline-texticon-text-color-key-focus: ButtonText; + --spectrum-button-m-primary-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-disabled: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-primary-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-primary-outline-texticon-border-color: ButtonText; + --spectrum-button-m-primary-outline-texticon-border-color-disabled: GrayText; + --spectrum-button-m-primary-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-primary-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-primary-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-primary-outline-texticon-text-color: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-primary-outline-texticon-text-color-key-focus: ButtonText; + --spectrum-button-m-secondary-outline-texticon-background-color: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-down: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-hover: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-background-color-key-focus: ButtonFace; + --spectrum-button-m-secondary-outline-texticon-border-color: ButtonText; + --spectrum-button-m-secondary-outline-texticon-border-color-down: Highlight; + --spectrum-button-m-secondary-outline-texticon-border-color-hover: Highlight; + --spectrum-button-m-secondary-outline-texticon-border-color-key-focus: Highlight; + --spectrum-button-m-secondary-outline-texticon-text-color: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-down: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-hover: ButtonText; + --spectrum-button-m-secondary-outline-texticon-text-color-key-focus: ButtonText; + } + :host(.focus-visible):after, + :host([focused]):after { + box-shadow: 0 0 0 + var(--spectrum-button-primary-fill-texticon-focus-ring-size) + Highlight; + } + :host(:focus-visible):after, + :host([focused]):after { + box-shadow: 0 0 0 + var(--spectrum-button-primary-fill-texticon-focus-ring-size) + Highlight; + } + :host { + forced-color-adjust: none; + } + :host([active]) .spectrum-Button--overBackground { + color: ButtonText; + } } -:host([variant='cta']:focus-visible) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color-key-focus, - var(--spectrum-semantic-cta-background-color-hover) - ); /* .spectrum-Button--cta.focus-ring */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color-key-focus, - var(--spectrum-semantic-cta-background-color-hover) - ); - color: var( - --spectrum-button-m-cta-texticon-text-color-key-focus, - var(--spectrum-global-color-static-white) - ); +.spectrum-Button--overBackground:hover { + color: ButtonText; /* .spectrum-Button--overBackground:hover */ } -:host([variant='cta'][active]) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color-down, - var(--spectrum-semantic-cta-background-color-down) - ); /* .spectrum-Button--cta:active */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color-down, - var(--spectrum-semantic-cta-background-color-down) +.spectrum-Button--overBackground.focus-visible { + color: ButtonText; /* .spectrum-Button--overBackground:focus-visible */ +} +.spectrum-Button--overBackground:focus-visible { + color: ButtonText; /* .spectrum-Button--overBackground:focus-visible */ +} +:host { + --spectrum-button-m-accent-fill-texticon-background-color: var( + --spectrum-semantic-cta-background-color-default, + var(--spectrum-global-color-static-blue-600) + ); /* .spectrum-Button */ + --spectrum-button-m-accent-fill-texticon-background-color-hover: var( + --spectrum-semantic-cta-background-color-hover, + var(--spectrum-global-color-static-blue-700) ); - color: var( - --spectrum-button-m-cta-texticon-text-color-down, - var(--spectrum-global-color-static-white) + --spectrum-button-m-accent-fill-texticon-background-color-down: var( + --spectrum-semantic-cta-background-color-down, + var(--spectrum-global-color-static-blue-800) ); -} -:host([variant='cta']:disabled), -:host([variant='cta'][disabled]) { - background-color: var( - --spectrum-button-m-cta-texticon-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--cta:disabled, - * .spectrum-Button--cta.is-disabled */ - border-color: var( - --spectrum-button-m-cta-texticon-border-color-disabled, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-accent-fill-texticon-background-color-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus, + var(--spectrum-global-color-static-blue-600) ); - color: var( - --spectrum-button-m-cta-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-button-m-accent-outline-texticon-border-color: var( + --spectrum-semantic-cta-background-color-default, + var(--spectrum-global-color-static-blue-600) ); -} -:host([variant='primary']) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color, - var(--spectrum-alias-button-primary-background-color-default) - ); /* .spectrum-Button--primary */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color, - var(--spectrum-alias-button-primary-border-color-default) + --spectrum-button-m-accent-outline-texticon-border-color-hover: var( + --spectrum-semantic-cta-background-color-hover, + var(--spectrum-global-color-static-blue-700) ); - color: var( - --spectrum-button-m-primary-texticon-text-color, - var(--spectrum-alias-button-primary-text-color-default) + --spectrum-button-m-accent-outline-texticon-border-color-down: var( + --spectrum-semantic-cta-background-color-down, + var(--spectrum-global-color-static-blue-800) ); -} -:host([variant='primary']:hover) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color-hover, - var(--spectrum-alias-button-primary-background-color-hover) - ); /* .spectrum-Button--primary:hover */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color-hover, - var(--spectrum-alias-button-primary-border-color-hover) + --spectrum-button-m-accent-outline-texticon-border-color-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus, + var(--spectrum-global-color-static-blue-600) ); - color: var( - --spectrum-button-m-primary-texticon-text-color-hover, - var(--spectrum-alias-button-primary-text-color-hover) + --spectrum-button-m-accent-outline-texticon-icon-color: var( + --spectrum-semantic-cta-background-color-default, + var(--spectrum-global-color-static-blue-600) ); -} -:host([variant='primary'].focus-visible) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color-key-focus, - var(--spectrum-alias-button-primary-background-color-key-focus) - ); /* .spectrum-Button--primary.focus-ring */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color-key-focus, - var(--spectrum-alias-button-primary-border-color-key-focus) + --spectrum-button-m-accent-outline-texticon-icon-color-hover: var( + --spectrum-semantic-cta-background-color-hover, + var(--spectrum-global-color-static-blue-700) ); - color: var( - --spectrum-button-m-primary-texticon-text-color-key-focus, - var(--spectrum-alias-button-primary-text-color-key-focus) + --spectrum-button-m-accent-outline-texticon-icon-color-down: var( + --spectrum-semantic-cta-background-color-down, + var(--spectrum-global-color-static-blue-800) ); -} -:host([variant='primary']:focus-visible) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color-key-focus, - var(--spectrum-alias-button-primary-background-color-key-focus) - ); /* .spectrum-Button--primary.focus-ring */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color-key-focus, - var(--spectrum-alias-button-primary-border-color-key-focus) + --spectrum-button-m-accent-outline-texticon-icon-color-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus, + var(--spectrum-global-color-static-blue-600) ); - color: var( - --spectrum-button-m-primary-texticon-text-color-key-focus, - var(--spectrum-alias-button-primary-text-color-key-focus) + --spectrum-button-m-accent-outline-texticon-text-color: var( + --spectrum-semantic-cta-background-color-default, + var(--spectrum-global-color-static-blue-600) ); -} -:host([variant='primary'][active]) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color-down, - var(--spectrum-alias-button-primary-background-color-down) - ); /* .spectrum-Button--primary:active */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color-down, - var(--spectrum-alias-button-primary-border-color-down) + --spectrum-button-m-accent-outline-texticon-text-color-hover: var( + --spectrum-semantic-cta-background-color-hover, + var(--spectrum-global-color-static-blue-700) ); - color: var( - --spectrum-button-m-primary-texticon-text-color-down, - var(--spectrum-alias-button-primary-text-color-down) + --spectrum-button-m-accent-outline-texticon-text-color-down: var( + --spectrum-semantic-cta-background-color-down, + var(--spectrum-global-color-static-blue-800) ); -} -:host([variant='primary']:disabled), -:host([variant='primary'][disabled]) { - background-color: var( - --spectrum-button-m-primary-texticon-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--primary:disabled, - * .spectrum-Button--primary.is-disabled */ - border-color: var( - --spectrum-button-m-primary-texticon-border-color-disabled, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-accent-outline-texticon-text-color-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus, + var(--spectrum-global-color-static-blue-600) ); +} +:host(:not([variant='white']):not([variant='black'])[disabled]) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-texticon-text-color-disabled, + --spectrum-button-m-primary-fill-texticon-icon-color-disabled, var(--spectrum-global-color-gray-500) - ); + ); /* .spectrum-Button:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled .spectrum-Icon */ } -:host([variant='secondary']) { - background-color: var( - --spectrum-button-m-secondary-texticon-background-color, - var(--spectrum-alias-button-secondary-background-color-default) - ); /* .spectrum-Button--secondary */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color, - var(--spectrum-alias-button-secondary-border-color-default) - ); +:host(:not([variant='white']):not([variant='black'])[disabled]) #label { color: var( - --spectrum-button-m-secondary-texticon-text-color, - var(--spectrum-alias-button-secondary-text-color-default) - ); + --spectrum-button-m-primary-fill-texticon-text-color-disabled, + var(--spectrum-global-color-gray-500) + ); /* .spectrum-Button:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled .spectrum-Button-label */ } -:host([variant='secondary']:hover) { - background-color: var( - --spectrum-button-m-secondary-texticon-background-color-hover, - var(--spectrum-alias-button-secondary-background-color-hover) - ); /* .spectrum-Button--secondary:hover */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color-hover, - var(--spectrum-alias-button-secondary-border-color-hover) - ); +:host([variant='white'][disabled]) ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-texticon-text-color-hover, - var(--spectrum-alias-button-secondary-text-color-hover) - ); + --spectrum-button-m-primary-fill-white-texticon-icon-color-disabled, + var(--spectrum-global-color-static-transparent-white-500) + ); /* .spectrum-Button.spectrum-Button--staticWhite:disabled .spectrum-Icon */ } -:host([variant='secondary'].focus-visible) { - background-color: var( - --spectrum-button-m-secondary-texticon-background-color-key-focus, - var(--spectrum-alias-button-secondary-background-color-key-focus) - ); /* .spectrum-Button--secondary.focus-ring */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color-key-focus, - var(--spectrum-alias-button-secondary-border-color-key-focus) - ); +:host([variant='white'][disabled]) #label { color: var( - --spectrum-button-m-secondary-texticon-text-color-key-focus, - var(--spectrum-alias-button-secondary-text-color-key-focus) - ); + --spectrum-button-m-primary-fill-white-texticon-text-color-disabled, + var(--spectrum-global-color-static-transparent-white-500) + ); /* .spectrum-Button.spectrum-Button--staticWhite:disabled .spectrum-Button-label */ } -:host([variant='secondary']:focus-visible) { +:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) { background-color: var( - --spectrum-button-m-secondary-texticon-background-color-key-focus, - var(--spectrum-alias-button-secondary-background-color-key-focus) - ); /* .spectrum-Button--secondary.focus-ring */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color-key-focus, - var(--spectrum-alias-button-secondary-border-color-key-focus) - ); - color: var( - --spectrum-button-m-secondary-texticon-text-color-key-focus, - var(--spectrum-alias-button-secondary-text-color-key-focus) - ); + --spectrum-button-m-primary-fill-white-texticon-background-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) */ } -:host([variant='secondary'][active]) { - background-color: var( - --spectrum-button-m-secondary-texticon-background-color-down, - var(--spectrum-alias-button-secondary-background-color-down) - ); /* .spectrum-Button--secondary:active */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color-down, - var(--spectrum-alias-button-secondary-border-color-down) - ); - color: var( - --spectrum-button-m-secondary-texticon-text-color-down, - var(--spectrum-alias-button-secondary-text-color-down) - ); +:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) + ::slotted([slot='icon']) { + color: inherit; /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Icon */ +} +:host([variant='white'][treatment='fill']:not([variant='secondary']):not([disabled])) + #label { + color: inherit; /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Button-label */ } -:host([variant='secondary']:disabled), -:host([variant='secondary'][disabled]) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) { background-color: var( - --spectrum-button-m-secondary-texticon-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--secondary:disabled, - * .spectrum-Button--secondary.is-disabled */ - border-color: var( - --spectrum-button-m-secondary-texticon-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) */ +} +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + --spectrum-button-m-secondary-fill-white-texticon-icon-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Icon */ } -:host([variant='negative']) { - background-color: var( - --spectrum-button-m-negative-texticon-background-color, - var(--spectrum-alias-button-negative-background-color-default) - ); /* .spectrum-Button--negative */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color, - var(--spectrum-alias-button-negative-border-color-default) - ); +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])) + #label { color: var( - --spectrum-button-m-negative-texticon-text-color, - var(--spectrum-alias-button-negative-text-color-default) - ); + --spectrum-button-m-secondary-fill-white-texticon-text-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Button-label */ } -:host([variant='negative']:hover) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]):hover) { background-color: var( - --spectrum-button-m-negative-texticon-background-color-hover, - var(--spectrum-alias-button-negative-background-color-hover) - ); /* .spectrum-Button--negative:hover */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color-hover, - var(--spectrum-alias-button-negative-border-color-hover) - ); - color: var( - --spectrum-button-m-negative-texticon-text-color-hover, - var(--spectrum-alias-button-negative-text-color-hover) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):hover */ } -:host([variant='negative'].focus-visible) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled])[active]) { background-color: var( - --spectrum-button-m-negative-texticon-background-color-key-focus, - var(--spectrum-alias-button-negative-background-color-key-focus) - ); /* .spectrum-Button--negative.focus-ring */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color-key-focus, - var(--spectrum-alias-button-negative-border-color-key-focus) - ); - color: var( - --spectrum-button-m-negative-texticon-text-color-key-focus, - var(--spectrum-alias-button-negative-text-color-key-focus) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-white-500) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):active */ } -:host([variant='negative']:focus-visible) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]).focus-visible) { background-color: var( - --spectrum-button-m-negative-texticon-background-color-key-focus, - var(--spectrum-alias-button-negative-background-color-key-focus) - ); /* .spectrum-Button--negative.focus-ring */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color-key-focus, - var(--spectrum-alias-button-negative-border-color-key-focus) - ); - color: var( - --spectrum-button-m-negative-texticon-text-color-key-focus, - var(--spectrum-alias-button-negative-text-color-key-focus) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ } -:host([variant='negative'][active]) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]):focus-visible) { background-color: var( - --spectrum-button-m-negative-texticon-background-color-down, - var(--spectrum-alias-button-negative-background-color-down) - ); /* .spectrum-Button--negative:active */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color-down, - var(--spectrum-alias-button-negative-border-color-down) - ); - color: var( - --spectrum-button-m-negative-texticon-text-color-down, - var(--spectrum-alias-button-negative-text-color-down) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ } -:host([variant='negative']:disabled), -:host([variant='negative'][disabled]) { +:host([variant='white'][treatment='fill'][variant='secondary']:not([disabled]).is-keyboardFocused) { background-color: var( - --spectrum-button-m-negative-texticon-background-color-disabled, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--negative:disabled, - * .spectrum-Button--negative.is-disabled */ - border-color: var( - --spectrum-button-m-negative-texticon-border-color-disabled, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-m-negative-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + --spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ } -:host([variant='overBackground']) { +:host([variant='white'][treatment='fill'][disabled]) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--overBackground */ - border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color, + --spectrum-button-m-secondary-fill-white-texticon-background-color-disabled, + var(--spectrum-global-color-static-transparent-white-200) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--fill:disabled */ +} +:host([variant='white'][treatment='outline']:not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-outline-white-texticon-icon-color, var(--spectrum-global-color-static-white) - ); + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(:disabled) .spectrum-Icon */ +} +:host([variant='white'][treatment='outline']:not([disabled])) #label { color: var( - --spectrum-button-m-primary-overbackground-texticon-text-color, + --spectrum-button-m-secondary-outline-white-texticon-text-color, var(--spectrum-global-color-static-white) - ); + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(:disabled) .spectrum-Button-label */ } -:host([variant='overBackground']:hover) { +:host([variant='white'][treatment='outline'][disabled]) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color-hover, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground:hover */ - border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color-hover, - var(--spectrum-global-color-static-white) + --spectrum-button-m-secondary-outline-white-texticon-background-color-disabled, + var(--spectrum-alias-background-color-transparent) ); - color: inherit; + border-color: var( + --spectrum-button-m-secondary-outline-white-texticon-border-color-disabled, + var(--spectrum-global-color-static-transparent-white-200) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:disabled */ } -:host([variant='overBackground'].focus-visible) { +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled])) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color-hover, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.focus-ring */ + --spectrum-button-m-primary-outline-white-texticon-background-color, + var(--spectrum-alias-background-color-transparent) + ); border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color-hover, + --spectrum-button-m-primary-outline-white-texticon-border-color, var(--spectrum-global-color-static-white) - ); - color: inherit; + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled) */ } -:host([variant='overBackground']:focus-visible) { +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]):hover) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color-hover, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.focus-ring */ - border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color-hover, - var(--spectrum-global-color-static-white) - ); - color: inherit; + --spectrum-button-m-primary-outline-white-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):hover */ } -:host([variant='overBackground'].focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.focus-ring:after */ +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-primary-outline-white-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):active */ } -:host([variant='overBackground']:focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.focus-ring:after */ +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ } -:host([variant='overBackground'][active]) { +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]):focus-visible) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color-down, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground:active */ - border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color-down, - var(--spectrum-global-color-static-white) - ); - color: inherit; + --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ } -:host([variant='overBackground']:disabled), -:host([variant='overBackground'][disabled]) { +:host([variant='white'][treatment='outline']:not([variant='secondary']):not([disabled]).is-keyboardFocused) { background-color: var( - --spectrum-button-m-primary-overbackground-texticon-background-color-disabled, - var(--spectrum-alias-background-color-overbackground-disabled) - ); /* .spectrum-Button--overBackground:disabled, - * .spectrum-Button--overBackground.is-disabled */ - border-color: var( - --spectrum-button-m-primary-overbackground-texticon-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-m-primary-overbackground-texticon-text-color-disabled, - var(--spectrum-alias-text-color-overbackground-disabled) - ); + --spectrum-button-m-primary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled).is-keyboardFocused */ } -:host([variant='overBackground'][quiet]) { +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled])) { background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color, + --spectrum-button-m-secondary-outline-white-texticon-background-color, var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet, - * .spectrum-ClearButton--overBackground */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color, - var(--spectrum-global-color-static-white) ); + border-color: var( + --spectrum-button-m-secondary-outline-white-texticon-border-color, + var(--spectrum-global-color-static-transparent-white-200) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled) */ } -:host([variant='overBackground'][quiet]:hover) { +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]):hover) { background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover, - var(--spectrum-alias-background-color-quiet-overbackground-hover) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet:hover, - * .spectrum-ClearButton--overBackground:hover */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover, - var(--spectrum-global-color-static-white) - ); + --spectrum-button-m-secondary-outline-white-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):hover */ } -:host([variant='overBackground'][quiet].focus-visible) { +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled])[active]) { background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover, - var(--spectrum-alias-background-color-quiet-overbackground-hover) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, - * .spectrum-ClearButton--overBackground.focus-ring */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - box-shadow: none; - color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover, - var(--spectrum-global-color-static-white) - ); + --spectrum-button-m-secondary-outline-white-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-white-400) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):active */ } -:host([variant='overBackground'][quiet]:focus-visible) { +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]).focus-visible) { background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover, - var(--spectrum-alias-background-color-quiet-overbackground-hover) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring, - * .spectrum-ClearButton--overBackground.focus-ring */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover, - var(--spectrum-alias-border-color-transparent) - ); - box-shadow: none; + --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='white'][treatment='outline'][variant='secondary']:not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-white-300) + ); /* .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ +} +:host([variant='black'][disabled]) ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover, - var(--spectrum-global-color-static-white) - ); + --spectrum-button-m-primary-fill-black-texticon-icon-color-disabled, + var(--spectrum-global-color-static-transparent-black-500) + ); /* .spectrum-Button.spectrum-Button--staticBlack:disabled .spectrum-Icon */ } -:host([variant='overBackground'][quiet].focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring:after, - * .spectrum-ClearButton--overBackground.focus-ring:after */ +:host([variant='black'][disabled]) #label { + color: var( + --spectrum-button-m-primary-fill-black-texticon-text-color-disabled, + var(--spectrum-global-color-static-transparent-black-500) + ); /* .spectrum-Button.spectrum-Button--staticBlack:disabled .spectrum-Button-label */ } -:host([variant='overBackground'][quiet]:focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet.focus-ring:after, - * .spectrum-ClearButton--overBackground.focus-ring:after */ +:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) { + background-color: var( + --spectrum-button-m-primary-fill-black-texticon-background-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) */ +} +:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) + ::slotted([slot='icon']) { + color: inherit; /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Icon */ } -:host([variant='overBackground'][quiet][active]) { +:host([variant='black'][treatment='fill']:not([variant='secondary']):not([disabled])) + #label { + color: inherit; /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:not(.spectrum-Button--secondary):not(:disabled) .spectrum-Button-label */ +} +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) { background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down, - var(--spectrum-alias-background-color-quiet-overbackground-down) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet:active, - * .spectrum-ClearButton--overBackground:active */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down, - var(--spectrum-alias-border-color-transparent) - ); + --spectrum-button-m-secondary-fill-black-texticon-background-color, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) */ +} +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down, - var(--spectrum-global-color-static-white) - ); + --spectrum-button-m-secondary-fill-black-texticon-icon-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Icon */ } -:host([variant='overBackground'][quiet]:disabled), -:host([variant='overBackground'][quiet][disabled]) { - background-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--overBackground.spectrum-Button--quiet:disabled, - * .spectrum-Button--overBackground.spectrum-Button--quiet.is-disabled, - * .spectrum-ClearButton--overBackground:disabled, - * .spectrum-ClearButton--overBackground.is-disabled */ - border-color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled, - var(--spectrum-alias-border-color-transparent) - ); +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])) + #label { color: var( - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled, - var(--spectrum-alias-text-color-quiet-overbackground-disabled) - ); + --spectrum-button-m-secondary-fill-black-texticon-text-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled) .spectrum-Button-label */ } -:host([variant='primary'][quiet]) { +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]):hover) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--primary.spectrum-Button--quiet */ - border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color, - var(--spectrum-alias-background-color-transparent) - ); - color: var( - --spectrum-button-m-primary-quiet-texticon-text-color, - var(--spectrum-global-color-gray-800) - ); + --spectrum-button-m-secondary-fill-black-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):hover */ } -:host([variant='primary'][quiet]:hover) { +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled])[active]) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color-hover, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--primary.spectrum-Button--quiet:hover */ - border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color-hover, - var(--spectrum-global-color-gray-200) - ); - color: var( - --spectrum-button-m-primary-quiet-texticon-text-color-hover, - var(--spectrum-global-color-gray-900) - ); + --spectrum-button-m-secondary-fill-black-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-black-500) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):active */ } -:host([variant='primary'][quiet].focus-visible) { +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]).focus-visible) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--primary.spectrum-Button--quiet.focus-ring */ + --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='fill'][variant='secondary']:not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ +} +:host([variant='black'][treatment='fill'][disabled]) { + background-color: var( + --spectrum-button-m-secondary-fill-black-texticon-background-color-disabled, + var(--spectrum-global-color-static-transparent-black-200) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--fill:disabled */ +} +:host([variant='black'][treatment='outline']:not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-outline-black-texticon-icon-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(:disabled) .spectrum-Icon */ +} +:host([variant='black'][treatment='outline']:not([disabled])) #label { + color: var( + --spectrum-button-m-secondary-outline-black-texticon-text-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(:disabled) .spectrum-Button-label */ +} +:host([variant='black'][treatment='outline'][disabled]) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-disabled, + var(--spectrum-alias-background-color-transparent) + ); border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-secondary-outline-black-texticon-border-color-disabled, + var(--spectrum-global-color-static-transparent-black-200) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:disabled */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled])) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color, + var(--spectrum-alias-background-color-transparent) + ); + border-color: var( + --spectrum-button-m-primary-outline-black-texticon-border-color, + var(--spectrum-global-color-static-black) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled) */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):hover */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):active */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='outline']:not([variant='secondary']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-primary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary):not(:disabled).is-keyboardFocused */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled])) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color, + var(--spectrum-alias-background-color-transparent) ); + border-color: var( + --spectrum-button-m-secondary-outline-black-texticon-border-color, + var(--spectrum-global-color-static-transparent-black-200) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled) */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]):hover) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-hover, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):hover */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled])[active]) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-down, + var(--spectrum-global-color-static-transparent-black-400) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):active */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled):focus-visible */ +} +:host([variant='black'][treatment='outline'][variant='secondary']:not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus, + var(--spectrum-global-color-static-transparent-black-300) + ); /* .spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline.spectrum-Button--secondary:not(:disabled).is-keyboardFocused */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color, + var(--spectrum-global-color-static-blue-600) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-accent-fill-texticon-icon-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-accent-fill-texticon-text-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color-hover, + var(--spectrum-global-color-static-blue-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color-down, + var(--spectrum-global-color-static-blue-800) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-blue-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-blue-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-accent-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-blue-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color, + var(--spectrum-global-color-static-red-600) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-negative-fill-texticon-icon-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-negative-fill-texticon-text-color, + var(--spectrum-global-color-static-white) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color-hover, + var(--spectrum-global-color-static-red-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color-down, + var(--spectrum-global-color-static-red-800) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-red-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-red-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-negative-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-static-red-700) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-texticon-text-color-key-focus, + --spectrum-button-m-primary-fill-texticon-icon-color, + var(--spectrum-global-color-gray-50) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-primary-fill-texticon-text-color, + var(--spectrum-global-color-gray-50) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color-hover, var(--spectrum-global-color-gray-900) - ); + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ } -:host([variant='primary'][quiet]:focus-visible) { +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--primary.spectrum-Button--quiet.focus-ring */ - border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color-key-focus, + --spectrum-button-m-primary-fill-texticon-background-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-secondary-fill-texticon-background-color, var(--spectrum-global-color-gray-200) - ); + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-fill-texticon-icon-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-secondary-fill-texticon-background-color-hover, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-texticon-text-color-key-focus, + --spectrum-button-m-secondary-fill-texticon-icon-color-hover, var(--spectrum-global-color-gray-900) - ); + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color-hover, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-secondary-fill-texticon-background-color-down, + var(--spectrum-global-color-gray-400) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-fill-texticon-icon-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ } -:host([variant='primary'][quiet][active]) { +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color-down, + --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button--primary.spectrum-Button--quiet:active */ - border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color-down, + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, var(--spectrum-global-color-gray-300) - ); + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-texticon-text-color-down, + --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, var(--spectrum-global-color-gray-900) - ); + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ } -:host([variant='primary'][quiet]:disabled), -:host([variant='primary'][quiet][disabled]) { +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { background-color: var( - --spectrum-button-m-primary-quiet-texticon-background-color-disabled, + --spectrum-button-m-secondary-fill-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-fill-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +} +:host([treatment='fill'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-secondary-fill-texticon-text-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--fill.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='fill']:not([variant='white']):not([variant='black'])[disabled]) { + background-color: var( + --spectrum-button-m-primary-fill-texticon-background-color-disabled, + var(--spectrum-global-color-gray-200) + ); /* .spectrum-Button.spectrum-Button--fill:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled */ +} +:host([treatment='fill'][disabled]) { + border-color: var( + --spectrum-button-m-primary-fill-texticon-border-color-disabled, + transparent + ); /* .spectrum-Button.spectrum-Button--fill:disabled */ +} +:host([treatment='fill']:not([disabled])) { + border-color: var( + --spectrum-button-m-primary-fill-texticon-border-color, + transparent + ); /* .spectrum-Button.spectrum-Button--fill:not(:disabled) */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-accent-outline-texticon-background-color, var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--primary.spectrum-Button--quiet:disabled, - * .spectrum-Button--primary.spectrum-Button--quiet.is-disabled */ + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ border-color: var( - --spectrum-button-m-primary-quiet-texticon-border-color-disabled, - var(--spectrum-alias-border-color-transparent) + --spectrum-button-m-accent-outline-texticon-border-color, + var(--spectrum-global-color-blue-500) ); +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-primary-quiet-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-button-m-accent-outline-texticon-icon-color, + var(--spectrum-global-color-blue-500) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-accent-outline-texticon-background-color-hover, + var(--spectrum-alias-transparent-blue-background-color-hover) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ + border-color: var( + --spectrum-button-m-accent-outline-texticon-border-color-hover, + var(--spectrum-global-color-blue-600) ); } -:host([variant='secondary'][quiet]) { +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-accent-outline-texticon-icon-color-hover, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):hover) + #label { + color: var( + --spectrum-button-m-accent-outline-texticon-text-color-hover, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet */ + --spectrum-button-m-accent-outline-texticon-background-color-down, + var(--spectrum-alias-transparent-blue-background-color-down) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-button-m-accent-outline-texticon-border-color-down, + var(--spectrum-global-color-blue-700) ); +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-accent-outline-texticon-icon-color-down, + var(--spectrum-global-color-blue-700) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])[active]) + #label { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color, - var(--spectrum-global-color-gray-700) + --spectrum-button-m-accent-outline-texticon-text-color-down, + var(--spectrum-global-color-blue-700) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-accent-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-blue-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ + border-color: var( + --spectrum-button-m-accent-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-blue-600) ); } -:host([variant='secondary'][quiet]:hover) { +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color-hover, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet:hover */ + --spectrum-button-m-accent-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-blue-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color-hover, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-accent-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-blue-600) ); +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color-hover, - var(--spectrum-global-color-gray-800) + --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + #label { + color: var( + --spectrum-button-m-accent-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + #label { + color: var( + --spectrum-button-m-accent-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-accent-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-blue-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ + border-color: var( + --spectrum-button-m-accent-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-blue-600) ); } -:host([variant='secondary'][quiet].focus-visible) { +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-accent-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + #label { + color: var( + --spectrum-button-m-accent-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-blue-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +} +:host([treatment='outline'][variant='accent']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-accent-outline-texticon-text-color, + var(--spectrum-global-color-blue-500) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--accent:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring */ + --spectrum-button-m-negative-outline-texticon-background-color, + var(--spectrum-alias-background-color-transparent) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-negative-outline-texticon-border-color, + var(--spectrum-global-color-red-500) ); +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-800) + --spectrum-button-m-negative-outline-texticon-icon-color, + var(--spectrum-global-color-red-500) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-negative-outline-texticon-background-color-hover, + var(--spectrum-alias-transparent-red-background-color-hover) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ + border-color: var( + --spectrum-button-m-negative-outline-texticon-border-color-hover, + var(--spectrum-global-color-red-600) ); } -:host([variant='secondary'][quiet]:focus-visible) { +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-negative-outline-texticon-icon-color-hover, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):hover) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color-hover, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring */ + --spectrum-button-m-negative-outline-texticon-background-color-down, + var(--spectrum-alias-transparent-red-background-color-down) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-negative-outline-texticon-border-color-down, + var(--spectrum-global-color-red-700) ); +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color-key-focus, - var(--spectrum-global-color-gray-800) + --spectrum-button-m-negative-outline-texticon-icon-color-down, + var(--spectrum-global-color-red-700) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])[active]) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color-down, + var(--spectrum-global-color-red-700) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-negative-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-red-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ + border-color: var( + --spectrum-button-m-negative-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-red-600) ); } -:host([variant='secondary'][quiet][active]) { +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color-down, - var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet:active */ + --spectrum-button-m-negative-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-red-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color-down, - var(--spectrum-global-color-gray-300) + --spectrum-button-m-negative-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-red-600) ); +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color-down, - var(--spectrum-global-color-gray-800) + --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { + background-color: var( + --spectrum-button-m-negative-outline-texticon-background-color-key-focus, + var(--spectrum-alias-transparent-red-background-color-key-focus) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ + border-color: var( + --spectrum-button-m-negative-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-red-600) ); } -:host([variant='secondary'][quiet]:disabled), -:host([variant='secondary'][quiet][disabled]) { +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-negative-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-red-600) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +} +:host([treatment='outline'][variant='negative']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-negative-outline-texticon-text-color, + var(--spectrum-global-color-red-500) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--negative:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) { background-color: var( - --spectrum-button-m-secondary-quiet-texticon-background-color-disabled, + --spectrum-button-m-primary-outline-texticon-background-color, var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--secondary.spectrum-Button--quiet:disabled, - * .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled */ + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ border-color: var( - --spectrum-button-m-secondary-quiet-texticon-border-color-disabled, - var(--spectrum-alias-border-color-transparent) + --spectrum-button-m-primary-outline-texticon-border-color, + var(--spectrum-global-color-gray-800) ); +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-secondary-quiet-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) + --spectrum-button-m-primary-outline-texticon-icon-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { + background-color: var( + --spectrum-button-m-primary-outline-texticon-background-color-hover, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ + border-color: var( + --spectrum-button-m-primary-outline-texticon-border-color-hover, + var(--spectrum-global-color-gray-900) ); } -:host([variant='negative'][quiet]) { +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-primary-outline-texticon-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + #label { + color: var( + --spectrum-button-m-primary-outline-texticon-text-color-hover, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--negative.spectrum-Button--quiet */ + --spectrum-button-m-primary-outline-texticon-background-color-down, + var(--spectrum-global-color-gray-400) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color, - var(--spectrum-alias-background-color-transparent) + --spectrum-button-m-primary-outline-texticon-border-color-down, + var(--spectrum-global-color-gray-900) ); +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-primary-outline-texticon-icon-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + #label { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color, - var(--spectrum-semantic-negative-text-color-small) + --spectrum-button-m-primary-outline-texticon-text-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { + background-color: var( + --spectrum-button-m-primary-outline-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ + border-color: var( + --spectrum-button-m-primary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-900) ); } -:host([variant='negative'][quiet]:hover) { +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color-hover, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--negative.spectrum-Button--quiet:hover */ + --spectrum-button-m-primary-outline-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color-hover, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-primary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-900) ); +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color-hover, - var(--spectrum-global-color-red-700) - ); + --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ } -:host([variant='negative'][quiet].focus-visible) { +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + #label { + color: var( + --spectrum-button-m-primary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + #label { + color: var( + --spectrum-button-m-primary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--negative.spectrum-Button--quiet.focus-ring */ + --spectrum-button-m-primary-outline-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-primary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-900) ); +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color-key-focus, - var(--spectrum-global-color-red-700) + --spectrum-button-m-primary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + #label { + color: var( + --spectrum-button-m-primary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ +} +:host([treatment='outline'][variant='primary']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-primary-outline-texticon-text-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--primary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) { + background-color: var( + --spectrum-button-m-secondary-outline-texticon-background-color, + var(--spectrum-alias-background-color-transparent) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) */ + border-color: var( + --spectrum-button-m-secondary-outline-texticon-border-color, + var(--spectrum-global-color-gray-300) ); } -:host([variant='negative'][quiet]:focus-visible) { +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-outline-texticon-icon-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Icon */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color-key-focus, - var(--spectrum-global-color-gray-200) - ); /* .spectrum-Button--negative.spectrum-Button--quiet.focus-ring */ + --spectrum-button-m-secondary-outline-texticon-background-color-hover, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color-key-focus, - var(--spectrum-global-color-gray-200) + --spectrum-button-m-secondary-outline-texticon-border-color-hover, + var(--spectrum-global-color-gray-400) ); +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color-key-focus, - var(--spectrum-global-color-red-700) + --spectrum-button-m-secondary-outline-texticon-icon-color-hover, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Icon */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):hover) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color-hover, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):hover .spectrum-Button-label */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) { + background-color: var( + --spectrum-button-m-secondary-outline-texticon-background-color-down, + var(--spectrum-global-color-gray-400) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active */ + border-color: var( + --spectrum-button-m-secondary-outline-texticon-border-color-down, + var(--spectrum-global-color-gray-500) ); } -:host([variant='negative'][quiet][active]) { +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-outline-texticon-icon-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Icon */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])[active]) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color-down, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):active .spectrum-Button-label */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color-down, + --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, var(--spectrum-global-color-gray-300) - ); /* .spectrum-Button--negative.spectrum-Button--quiet:active */ + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color-down, + --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-400) + ); +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) { + background-color: var( + --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible */ + border-color: var( + --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-400) ); +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color-down, - var(--spectrum-global-color-red-700) - ); + --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + ::slotted([slot='icon']) { + color: var( + --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Icon */ } -:host([variant='negative'][quiet]:disabled), -:host([variant='negative'][quiet][disabled]) { +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).focus-visible) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]):focus-visible) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled):focus-visible .spectrum-Button-label */ +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) { background-color: var( - --spectrum-button-m-negative-quiet-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); /* .spectrum-Button--negative.spectrum-Button--quiet:disabled, - * .spectrum-Button--negative.spectrum-Button--quiet.is-disabled */ + --spectrum-button-m-secondary-outline-texticon-background-color-key-focus, + var(--spectrum-global-color-gray-300) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused */ border-color: var( - --spectrum-button-m-negative-quiet-texticon-border-color-disabled, - var(--spectrum-alias-border-color-transparent) + --spectrum-button-m-secondary-outline-texticon-border-color-key-focus, + var(--spectrum-global-color-gray-400) ); +} +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + ::slotted([slot='icon']) { color: var( - --spectrum-button-m-negative-quiet-texticon-text-color-disabled, - var(--spectrum-global-color-gray-500) - ); + --spectrum-button-m-secondary-outline-texticon-icon-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Icon */ } -@media (forced-colors: active) { - :host { - --spectrum-button-m-cta-texticon-background-color: ButtonText; - --spectrum-button-m-cta-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-cta-texticon-background-color-down: Highlight; - --spectrum-button-m-cta-texticon-background-color-hover: Highlight; - --spectrum-button-m-cta-texticon-background-color-key-focus: Highlight; - --spectrum-button-m-cta-texticon-border-color: ButtonFace; - --spectrum-button-m-cta-texticon-border-color-disabled: GrayText; - --spectrum-button-m-cta-texticon-border-color-down: Highlight; - --spectrum-button-m-cta-texticon-border-color-hover: Highlight; - --spectrum-button-m-cta-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-cta-texticon-text-color: ButtonFace; - --spectrum-button-m-cta-texticon-text-color-disabled: GrayText; - --spectrum-button-m-cta-texticon-text-color-down: Buttonface; - --spectrum-button-m-cta-texticon-text-color-hover: Buttonface; - --spectrum-button-m-cta-texticon-text-color-key-focus: Buttonface; - --spectrum-button-m-negative-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-negative-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-negative-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-negative-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-negative-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-negative-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-negative-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-negative-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-negative-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-negative-texticon-background-color: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-down: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-negative-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-negative-texticon-border-color: ButtonText; - --spectrum-button-m-negative-texticon-border-color-disabled: GrayText; - --spectrum-button-m-negative-texticon-border-color-down: Highlight; - --spectrum-button-m-negative-texticon-border-color-hover: Highlight; - --spectrum-button-m-negative-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-negative-texticon-text-color: ButtonText; - --spectrum-button-m-negative-texticon-text-color-disabled: GrayText; - --spectrum-button-m-negative-texticon-text-color-down: ButtonText; - --spectrum-button-m-negative-texticon-text-color-hover: ButtonText; - --spectrum-button-m-negative-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-overbackground-texticon-border-color: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-overbackground-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-overbackground-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-overbackground-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-overbackground-texticon-text-color: ButtonText; - --spectrum-button-m-primary-overbackground-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-primary-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-primary-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-primary-texticon-border-color: ButtonText; - --spectrum-button-m-primary-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-texticon-border-color-down: Highlight; - --spectrum-button-m-primary-texticon-border-color-hover: Highlight; - --spectrum-button-m-primary-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-primary-texticon-text-color: ButtonText; - --spectrum-button-m-primary-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-texticon-text-color-down: ButtonText; - --spectrum-button-m-primary-texticon-text-color-hover: ButtonText; - --spectrum-button-m-primary-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-background-color: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-down: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-secondary-quiet-texticon-border-color: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-border-color-disabled: GrayText; - --spectrum-button-m-secondary-quiet-texticon-border-color-down: Highlight; - --spectrum-button-m-secondary-quiet-texticon-border-color-hover: Highlight; - --spectrum-button-m-secondary-quiet-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-secondary-quiet-texticon-text-color: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-quiet-texticon-text-color-down: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-hover: ButtonText; - --spectrum-button-m-secondary-quiet-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-secondary-texticon-background-color: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-down: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-secondary-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-secondary-texticon-border-color: ButtonText; - --spectrum-button-m-secondary-texticon-border-color-disabled: GrayText; - --spectrum-button-m-secondary-texticon-border-color-down: Highlight; - --spectrum-button-m-secondary-texticon-border-color-hover: Highlight; - --spectrum-button-m-secondary-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-secondary-texticon-text-color: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-texticon-text-color-down: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-hover: ButtonText; - --spectrum-button-m-secondary-texticon-text-color-key-focus: ButtonText; - } - :host(.focus-visible):after, - :host([focused]):after { - box-shadow: 0 0 0 - var(--spectrum-button-primary-texticon-focus-ring-size) Highlight; - } - :host(:focus-visible):after, - :host([focused]):after { - box-shadow: 0 0 0 - var(--spectrum-button-primary-texticon-focus-ring-size) Highlight; - } - :host { - forced-color-adjust: none; - } - :host([variant='overBackground']:hover) { - color: ButtonText; - } - :host([variant='overBackground'].focus-visible) { - color: ButtonText; - } - :host([variant='overBackground']:focus-visible) { - color: ButtonText; - } - :host([variant='overBackground'][active]) { - color: ButtonText; - } +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled]).is-keyboardFocused) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color-key-focus, + var(--spectrum-global-color-gray-900) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled).is-keyboardFocused .spectrum-Button-label */ } -@media (forced-colors: active) { - .spectrum-LogicButton:after { - --spectrum-button-m-primary-texticon-focus-ring-color-key-focus: Highlight; - forced-color-adjust: none; - } - .spectrum-LogicButton { - --spectrum-button-primary-texticon-focus-ring-size: 2; - --spectrum-button-m-secondary-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-texticon-border-color-disabled: GrayText; - --spectrum-logicbutton-and-background-color: ButtonFace; - --spectrum-logicbutton-and-background-color-disabled: ButtonFace; - --spectrum-logicbutton-and-background-color-hover: ButtonFace; - --spectrum-logicbutton-and-border-color: ButtonText; - --spectrum-logicbutton-and-border-color-disabled: GrayText; - --spectrum-logicbutton-and-border-color-hover: Highlight; - --spectrum-logicbutton-and-text-color: ButtonText; - --spectrum-logicbutton-and-text-color-disabled: GrayText; - --spectrum-logicbutton-or-background-color: ButtonFace; - --spectrum-logicbutton-or-background-color-hover: ButtonFace; - --spectrum-logicbutton-or-border-color: ButtonText; - --spectrum-logicbutton-or-border-color-hover: Highlight; - --spectrum-logicbutton-or-text-color: ButtonText; - forced-color-adjust: none; - } +:host([treatment='outline'][variant='secondary']:not([variant='white']):not([variant='black']):not([disabled])) + #label { + color: var( + --spectrum-button-m-secondary-outline-texticon-text-color, + var(--spectrum-global-color-gray-800) + ); /* .spectrum-Button.spectrum-Button--outline.spectrum-Button--secondary:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):not(:disabled) .spectrum-Button-label */ +} +:host([treatment='outline']:not([variant='white']):not([variant='black'])[disabled]) { + background-color: var( + --spectrum-button-m-primary-outline-texticon-background-color-disabled, + var(--spectrum-alias-background-color-transparent) + ); + border-color: var( + --spectrum-button-m-primary-outline-texticon-border-color-disabled, + var(--spectrum-global-color-gray-200) + ); /* .spectrum-Button.spectrum-Button--outline:not(.spectrum-Button--staticWhite):not(.spectrum-Button--staticBlack):disabled */ } diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js index 81887367b0..9a97aa0ae6 100644 --- a/packages/button/src/spectrum-config.js +++ b/packages/button/src/spectrum-config.js @@ -44,6 +44,11 @@ const config = { selector: '.is-disabled', name: 'disabled', }, + { + type: 'boolean', + selector: ':disabled', + name: 'disabled', + }, { type: 'boolean', selector: '.is-focused', @@ -58,84 +63,26 @@ const config = { type: 'enum', name: 'variant', values: [ - '.spectrum-Button--cta', + '.spectrum-Button--accent', '.spectrum-Button--primary', '.spectrum-Button--secondary', '.spectrum-Button--negative', - '.spectrum-Button--overBackground', - '.spectrum-Button--secondary', - ], - }, - { - type: 'enum', - name: 'size', - forceOntoHost: true, - values: [ { - name: 's', - selector: '.spectrum-Button--sizeS', + name: 'white', + selector: '.spectrum-Button--staticWhite', }, { - name: 'm', - selector: '.spectrum-Button--sizeM', - }, - { - name: 'l', - selector: '.spectrum-Button--sizeL', - }, - { - name: 'xl', - selector: '.spectrum-Button--sizeXL', + name: 'black', + selector: '.spectrum-Button--staticBlack', }, ], }, - ], - ids: ['.spectrum-Button-label'], - slots: [ - { - name: 'icon', - selector: '.spectrum-Icon', - }, - ], - exclude: [/\.spectrum-ClearButton/], - excludeSourceSelector: [ - /^(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*)$/, - ], - }, - { - name: 'clear-button', - host: { - selector: '.spectrum-ClearButton', - }, - attributes: [ - { - selector: '.spectrum-ClearButton--small', - type: 'boolean', - name: 'small', - }, - { - type: 'boolean', - selector: ':active', - name: 'active', - }, - { - type: 'boolean', - selector: '.is-disabled', - name: 'disabled', - }, { type: 'enum', - name: 'variant', + name: 'treatment', values: [ - '.spectrum-ClearButton--cta', - '.spectrum-ClearButton--primary', - '.spectrum-ClearButton--secondary', - { - name: 'negative', - selector: '.spectrum-ClearButton--warning', - }, - '.spectrum-ClearButton--overBackground', - '.spectrum-ClearButton--secondary', + '.spectrum-Button--fill', + '.spectrum-Button--outline', ], }, { @@ -145,34 +92,31 @@ const config = { values: [ { name: 's', - selector: '.spectrum-ClearButton--sizeS', + selector: '.spectrum-Button--sizeS', }, { name: 'm', - selector: '.spectrum-ClearButton--sizeM', + selector: '.spectrum-Button--sizeM', }, { name: 'l', - selector: '.spectrum-ClearButton--sizeL', + selector: '.spectrum-Button--sizeL', }, { name: 'xl', - selector: '.spectrum-ClearButton--sizeXL', + selector: '.spectrum-Button--sizeXL', }, ], }, ], - classes: [ + ids: ['.spectrum-Button-label'], + slots: [ { name: 'icon', selector: '.spectrum-Icon', }, - { - name: 'fill', - selector: '.spectrum-ClearButton-fill', - }, ], - exclude: [/\.spectrum-Button/], + exclude: [/\.spectrum-ClearButton/], excludeSourceSelector: [ /^(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*)$/, ], diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 6bf4e64b71..baf71de077 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -498,4 +498,52 @@ describe('Button', () => { expect(el.active).to.be.false; }); + describe('deprecated variants and attributes', () => { + it('manages [quiet]', async () => { + const el = await fixture