diff --git a/.changeset/silly-cobras-behave.md b/.changeset/silly-cobras-behave.md new file mode 100644 index 00000000000..41e6b874acd --- /dev/null +++ b/.changeset/silly-cobras-behave.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/actionbutton": patch +--- + +This update aims to simplify `--mod-` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-actionbutton-` properties instead and adjusts the specificity to ensure no regressions in rendered results. + +Other changes of note: + +- Removes the `.spectrum-ActionButton--sizeM` as unnecessary and duplicate as these styles are applied in the base class. +- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects. diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 08d99aab279..75d4a8b7ad1 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-ActionButton", ".spectrum-ActionButton--sizeL", - ".spectrum-ActionButton--sizeM", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", @@ -21,7 +20,6 @@ ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", ".spectrum-ActionButton.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", ".spectrum-ActionButton.spectrum-ActionButton--sizeS", ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", @@ -56,6 +54,7 @@ "--mod-actionbutton-background-color-hover", "--mod-actionbutton-background-color-hover-selected", "--mod-actionbutton-background-color-hover-selected-emphasized", + "--mod-actionbutton-background-color-selected-disabled", "--mod-actionbutton-border-color-default", "--mod-actionbutton-border-color-disabled", "--mod-actionbutton-border-color-down", @@ -89,7 +88,20 @@ "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", + "--mod-actionbutton-static-black-content-color", + "--mod-actionbutton-static-black-content-color-down", + "--mod-actionbutton-static-black-content-color-down-selected", + "--mod-actionbutton-static-black-content-color-focus", + "--mod-actionbutton-static-black-content-color-focus-selected", + "--mod-actionbutton-static-black-content-color-hover", + "--mod-actionbutton-static-black-content-color-hover-selected", + "--mod-actionbutton-static-black-content-color-selected", "--mod-actionbutton-static-content-color", + "--mod-actionbutton-static-white-content-color", + "--mod-actionbutton-static-white-content-color-down", + "--mod-actionbutton-static-white-content-color-focus", + "--mod-actionbutton-static-white-content-color-hover", + "--mod-actionbutton-static-white-content-color-selected", "--mod-actionbutton-text-to-visual", "--mod-animation-duration-100", "--mod-line-height-100", @@ -101,12 +113,14 @@ "--spectrum-action-button-edge-to-hold-icon-large", "--spectrum-action-button-edge-to-hold-icon-medium", "--spectrum-action-button-edge-to-hold-icon-small", - "--spectrum-actionbutton-background-color", "--spectrum-actionbutton-background-color-default", "--spectrum-actionbutton-background-color-disabled", "--spectrum-actionbutton-background-color-down", + "--spectrum-actionbutton-background-color-down-selected", "--spectrum-actionbutton-background-color-focus", + "--spectrum-actionbutton-background-color-focus-selected", "--spectrum-actionbutton-background-color-hover", + "--spectrum-actionbutton-background-color-hover-selected", "--spectrum-actionbutton-background-color-selected", "--spectrum-actionbutton-background-color-selected-disabled", "--spectrum-actionbutton-background-color-selected-down", @@ -121,7 +135,7 @@ "--spectrum-actionbutton-border-radius", "--spectrum-actionbutton-border-radius-default", "--spectrum-actionbutton-border-width", - "--spectrum-actionbutton-content-color", + "--spectrum-actionbutton-content-color-disabled", "--spectrum-actionbutton-content-color-selected", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", @@ -241,6 +255,7 @@ "--system-action-button-border-color-down", "--system-action-button-border-color-focus", "--system-action-button-border-color-hover", + "--system-action-button-border-radius-default", "--system-action-button-content-color-selected", "--system-action-button-quiet-background-color-default", "--system-action-button-quiet-background-color-disabled", @@ -249,15 +264,18 @@ "--system-action-button-quiet-background-color-hover", "--system-action-button-quiet-background-color-selected-disabled", "--system-action-button-size-l-border-radius-default", - "--system-action-button-size-m-border-radius-default", "--system-action-button-size-s-border-radius-default", "--system-action-button-size-xl-border-radius-default", "--system-action-button-size-xs-border-radius-default", "--system-action-button-static-black-background-color-default", "--system-action-button-static-black-background-color-disabled", "--system-action-button-static-black-background-color-down", + "--system-action-button-static-black-background-color-down-selected", "--system-action-button-static-black-background-color-focus", + "--system-action-button-static-black-background-color-focus-selected", "--system-action-button-static-black-background-color-hover", + "--system-action-button-static-black-background-color-hover-selected", + "--system-action-button-static-black-background-color-selected", "--system-action-button-static-black-background-color-selected-disabled", "--system-action-button-static-black-border-color-default", "--system-action-button-static-black-border-color-disabled", @@ -272,8 +290,12 @@ "--system-action-button-static-white-background-color-default", "--system-action-button-static-white-background-color-disabled", "--system-action-button-static-white-background-color-down", + "--system-action-button-static-white-background-color-down-selected", "--system-action-button-static-white-background-color-focus", + "--system-action-button-static-white-background-color-focus-selected", "--system-action-button-static-white-background-color-hover", + "--system-action-button-static-white-background-color-hover-selected", + "--system-action-button-static-white-background-color-selected", "--system-action-button-static-white-background-color-selected-disabled", "--system-action-button-static-white-border-color-default", "--system-action-button-static-white-border-color-disabled", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index ac4f410471e..fe2a8fb43d1 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -49,16 +49,14 @@ } .spectrum-ActionButton { - --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); - --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default)); - --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); - - --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); + --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -68,7 +66,39 @@ --spectrum-actionbutton-border-color: transparent; } - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ + &.spectrum-ActionButton--staticBlack { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-black-content-color, var(--spectrum-black)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-black-content-color-hover, var(--spectrum-black)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-black-content-color-down, var(--spectrum-black)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-black-content-color-focus, var(--spectrum-black)); + + --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-black-content-color-selected, var(--spectrum-white)); + --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-black-content-color-hover-selected, var(--spectrum-white)); + --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-black-content-color-down-selected, var(--spectrum-white)); + --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-black-content-color-focus-selected, var(--spectrum-white)); + + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + } + + &.spectrum-ActionButton--staticWhite { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-white-content-color, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-white-content-color-hover, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-white-content-color-down, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-white-content-color-focus, var(--spectrum-white)); + + --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black)); + --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black)); + --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black)); + --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-white-content-color-selected, var(--spectrum-black)); + + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + } + + /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes; must list after static variants */ &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); @@ -81,79 +111,22 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); } - &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); - - --mod-actionbutton-content-color-default: var(--spectrum-black); - --mod-actionbutton-content-color-hover: var(--spectrum-black); - --mod-actionbutton-content-color-down: var(--spectrum-black); - --mod-actionbutton-content-color-focus: var(--spectrum-black); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - } - - &.spectrum-ActionButton--staticWhite { - /* background color _not_ selected is coming from the system theme layer */ - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); - - --mod-actionbutton-content-color-default: var(--spectrum-white); - --mod-actionbutton-content-color-hover: var(--spectrum-white); - --mod-actionbutton-content-color-down: var(--spectrum-white); - --mod-actionbutton-content-color-focus: var(--spectrum-white); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - } - - &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus)); - --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); - - --mod-actionbutton-border-color-default: transparent; - --mod-actionbutton-border-color-hover: transparent; - --mod-actionbutton-border-color-down: transparent; - --mod-actionbutton-border-color-focus: transparent; - --mod-actionbutton-border-color-disabled: transparent; - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected)); - } - &:hover { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)); --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)); --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover)); } &:focus-visible { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)); --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus)); --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus)); } &:active { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)); --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down)); --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down)); @@ -161,22 +134,32 @@ &:disabled, &.is-disabled { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)); --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color)); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color))); } -} -.spectrum-ActionButton, -.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); + &.is-selected { + /* note the introduction of a more specific modifier in the following stacks, those should be used instead for customizations */ + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus)); + --mod-actionbutton-background-color-disabled: var(--mod-actionbutton-background-color-selected-disabled, var(--spectrum-actionbutton-background-color-selected-disabled)); + + /* @deprecated --mod-actionbutton-static-content-color in favor of the more specific, state-based alternatives */ + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected))); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected))); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected))); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--mod-actionbutton-static-content-color, var(--spectrum-actionbutton-content-color-selected))); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + } } .spectrum-ActionButton--sizeXS { @@ -224,6 +207,15 @@ } .spectrum-ActionButton { + --spectrum-actionbutton-content-color-disabled: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color)); + + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default)); + --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); + + --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); + /* Variables leveraging t-shirt sizing */ --spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height)); --spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size)); @@ -250,9 +242,9 @@ /* Start with text-only padding */ padding-inline: var(--spectrum-actionbutton-edge-to-text); - background-color: var(--spectrum-actionbutton-background-color); - border-color: var(--spectrum-actionbutton-border-color); - color: var(--spectrum-actionbutton-content-color); + background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index a2f9f796101..be6353eb9cd 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -46,8 +46,11 @@ &.spectrum-ActionButton--staticBlack { --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - &, &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); @@ -58,8 +61,11 @@ &.spectrum-ActionButton--staticWhite { --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - &, &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css index b436e9a77b5..3c51881978b 100644 --- a/components/actionbutton/themes/spectrum-two.css +++ b/components/actionbutton/themes/spectrum-two.css @@ -32,9 +32,7 @@ --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); - } + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); &.spectrum-ActionButton--sizeXS { --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); @@ -68,13 +66,17 @@ --spectrum-actionbutton-border-color-focus: transparent; --spectrum-actionbutton-border-color-disabled: transparent; - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; @@ -92,13 +94,17 @@ --spectrum-actionbutton-border-color-focus: transparent; --spectrum-actionbutton-border-color-disabled: transparent; - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-background-color-selected: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 0c07028cf58..b64e337a3ca 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -32,9 +32,10 @@ --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); + --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-100); + &.spectrum-ActionButton--sizeXS, &.spectrum-ActionButton--sizeS, - &.spectrum-ActionButton--sizeM, &.spectrum-ActionButton--sizeL, &.spectrum-ActionButton--sizeXL { --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-100);