diff --git a/.changeset/tall-pens-lay.md b/.changeset/tall-pens-lay.md new file mode 100644 index 00000000000..f80c2192c51 --- /dev/null +++ b/.changeset/tall-pens-lay.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/actionbutton": patch +--- + +This updates the colors used in action button for the spectrum two theme, so they are closer +aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making +it transparent and updates the background color tokens that are used. + +This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This +now shows the disabled colors. diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index b49b355497e..4832d75f498 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -176,13 +176,10 @@ "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", "--spectrum-disabled-background-color", - "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-disabled-static-black-background-color", - "--spectrum-disabled-static-black-border-color", "--spectrum-disabled-static-black-content-color", "--spectrum-disabled-static-white-background-color", - "--spectrum-disabled-static-white-border-color", "--spectrum-disabled-static-white-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -194,10 +191,7 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-400", "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-background-color-selected-default", @@ -216,16 +210,12 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-black-600", - "--spectrum-transparent-black-700", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-200", "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-transparent-white-600", - "--spectrum-transparent-white-700", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-200", "--spectrum-transparent-white-800", "--spectrum-transparent-white-900", "--spectrum-white", @@ -269,6 +259,7 @@ "--system-action-button-static-black-background-color-hover", "--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", "--system-action-button-static-black-border-color-down", "--system-action-button-static-black-border-color-focus", "--system-action-button-static-black-border-color-hover", @@ -284,6 +275,7 @@ "--system-action-button-static-white-background-color-hover", "--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", "--system-action-button-static-white-border-color-down", "--system-action-button-static-white-border-color-focus", "--system-action-button-static-white-border-color-hover", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index c87e5ebbf80..f5dce232230 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -25,13 +25,6 @@ forced-color-adjust: none; } - &:disabled, - &.is-disabled { - --highcontrast-actionbutton-content-color: GrayText; - --highcontrast-actionbutton-border-color: GrayText; - --highcontrast-actionbutton-background-color: ButtonFace; - } - &.is-selected { --highcontrast-actionbutton-background-color: Highlight; --highcontrast-actionbutton-border-color: HighlightText; @@ -45,6 +38,13 @@ forced-color-adjust: none; } } + + &:disabled, + &.is-disabled { + --highcontrast-actionbutton-content-color: GrayText; + --highcontrast-actionbutton-border-color: GrayText; + --highcontrast-actionbutton-background-color: ButtonFace; + } } } @@ -87,9 +87,6 @@ --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); - /* border color _not_ disabled is coming from the system theme layer */ - --mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --mod-actionbutton-content-color-default: var(--spectrum-black); --mod-actionbutton-content-color-hover: var(--spectrum-black); --mod-actionbutton-content-color-down: var(--spectrum-black); @@ -111,9 +108,6 @@ --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); - /* border color _not_ disabled is coming from the system theme layer */ - --mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --mod-actionbutton-content-color-default: var(--spectrum-white); --mod-actionbutton-content-color-hover: var(--spectrum-white); --mod-actionbutton-content-color-down: var(--spectrum-white); diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css index 4c889f693c7..2d4a993e9d7 100644 --- a/components/actionbutton/themes/spectrum-two.css +++ b/components/actionbutton/themes/spectrum-two.css @@ -13,10 +13,10 @@ @container style(--system: spectrum) { .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); @@ -24,11 +24,11 @@ --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --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-content-color-selected: var(--spectrum-gray-50); @@ -54,47 +54,57 @@ &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); } &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + --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-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--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); + --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: transparent; } } &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); + --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-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--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); + --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: transparent; } } diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index e0c964b8dd5..7b3f14b6219 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -24,6 +24,12 @@ --spectrum-actionbutton-background-color-disabled: transparent; --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); &.spectrum-ActionButton--sizeXS, @@ -45,12 +51,20 @@ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + + --spectrum-actionbutton-background-color-default: transparent; + --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-background-color-disabled: transparent; - &, &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; --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-background-color-disabled: transparent; } } @@ -59,12 +73,20 @@ --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + + --spectrum-actionbutton-background-color-default: transparent; + --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-background-color-disabled: transparent; - &, &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; --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-background-color-disabled: transparent; } } }