From 16f19fe0da55ad573c398d900c8e8ed50f00c216 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Thu, 10 Apr 2025 14:35:33 -0400 Subject: [PATCH 1/3] fix(actionbutton): reduce mod interception --- .changeset/silly-cobras-behave.md | 10 ++ components/actionbutton/dist/metadata.json | 24 ++- components/actionbutton/index.css | 143 +++++++++--------- components/actionbutton/themes/express.css | 10 +- .../actionbutton/themes/spectrum-two.css | 4 +- components/actionbutton/themes/spectrum.css | 3 +- 6 files changed, 116 insertions(+), 78 deletions(-) create mode 100644 .changeset/silly-cobras-behave.md 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..77221d4bd12 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", @@ -18,10 +17,9 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", + ".spectrum-ActionButton.spectrum-ActionButton--emphasized", ".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", @@ -89,7 +87,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", @@ -103,10 +114,14 @@ "--spectrum-action-button-edge-to-hold-icon-small", "--spectrum-actionbutton-background-color", "--spectrum-actionbutton-background-color-default", + "--spectrum-actionbutton-background-color-default-selected", "--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", @@ -122,6 +137,7 @@ "--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 +257,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,7 +266,6 @@ "--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", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index ac4f410471e..38d3599cce5 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -49,9 +49,19 @@ } .spectrum-ActionButton { + --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); + --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-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)); @@ -68,8 +78,51 @@ --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--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default-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); + + /* 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 { + /* background color _not_ selected is coming from the system theme layer */ + --spectrum-actionbutton-background-color-default-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); + + /* 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 { --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)); --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); @@ -81,79 +134,44 @@ --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 { + /* 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(--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)); + + /* @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-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); + + --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; } &: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,24 +179,13 @@ &: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)); } } -.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); -} - .spectrum-ActionButton--sizeXS { --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); 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..335c640fa53 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); 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); From c31d38094ebd52618d0143893d0137aa9722f351 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 11 Apr 2025 10:50:39 -0400 Subject: [PATCH 2/3] fix(actionbutton): quiet disabled+selected mod --- components/actionbutton/index.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 38d3599cce5..e93541abe29 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -140,6 +140,7 @@ --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))); @@ -147,8 +148,6 @@ --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-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); - --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; --spectrum-actionbutton-border-color-down: transparent; From 5ca3f4d13050e24665919ec796ea48c0ccd81988 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 11 Apr 2025 12:30:30 -0400 Subject: [PATCH 3/3] chore: working through static color specificity --- components/actionbutton/dist/metadata.json | 14 +++- components/actionbutton/index.css | 84 ++++++++----------- .../actionbutton/themes/spectrum-two.css | 20 +++-- 3 files changed, 59 insertions(+), 59 deletions(-) diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 77221d4bd12..75d4a8b7ad1 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -17,7 +17,7 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.spectrum-ActionButton--emphasized", + ".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--sizeS", @@ -54,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", @@ -112,9 +113,7 @@ "--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-default-selected", "--spectrum-actionbutton-background-color-disabled", "--spectrum-actionbutton-background-color-down", "--spectrum-actionbutton-background-color-down-selected", @@ -136,7 +135,6 @@ "--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", @@ -272,8 +270,12 @@ "--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", @@ -288,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 e93541abe29..fe2a8fb43d1 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -58,18 +58,6 @@ --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); - --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-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))); - &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } @@ -79,11 +67,6 @@ } &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default-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); - /* 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)); @@ -100,12 +83,6 @@ } &.spectrum-ActionButton--staticWhite { - /* background color _not_ selected is coming from the system theme layer */ - --spectrum-actionbutton-background-color-default-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); - /* 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)); @@ -122,7 +99,7 @@ } /* 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 { + &.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)); --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); @@ -134,27 +111,6 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); } - &.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; - } - &: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)); @@ -181,7 +137,28 @@ /* 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-actionbutton-content-color-disabled)); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color))); + } + + &.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; } } @@ -230,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)); @@ -256,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/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css index 335c640fa53..3c51881978b 100644 --- a/components/actionbutton/themes/spectrum-two.css +++ b/components/actionbutton/themes/spectrum-two.css @@ -66,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; @@ -90,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;