From 8f4dd2935653817e8d251e5ea31a4445c67e3db3 Mon Sep 17 00:00:00 2001 From: Red Ochsenbein Date: Mon, 3 Aug 2026 09:05:43 +0200 Subject: [PATCH 1/4] fix: icon hover state colors --- .../Button/styles/button.module.scss | 169 ++++++------------ 1 file changed, 54 insertions(+), 115 deletions(-) diff --git a/packages/components/src/components/Button/styles/button.module.scss b/packages/components/src/components/Button/styles/button.module.scss index 77e010d42e..b5b6409a41 100644 --- a/packages/components/src/components/Button/styles/button.module.scss +++ b/packages/components/src/components/Button/styles/button.module.scss @@ -4,6 +4,48 @@ @use '../../../utilities/transitions.module.scss'; @use '../../../utilities/sizeToken.module.scss'; +// Icon colors for a variant, applied from within the variant's own selector +@mixin icon-colors($text-color, $text-hover, $text-active, $icon-color, $icon-hover, $icon-active) { + & svg { + @if $icon-color { + color: var(--color-#{$icon-color}); + } @else { + color: var(--color-#{$text-color}); + } + + line-height: 0; + } + + @if $icon-hover { + &:hover svg { + color: var(--color-#{$icon-hover}); + } + } @else if $text-hover { + &:hover svg { + color: var(--color-#{$text-hover}); + } + } + + @if $icon-active { + &:active svg { + color: var(--color-#{$icon-active}); + } + } @else if $text-active { + &:active svg { + color: var(--color-#{$text-active}); + } + } + + // Forced colors mode support + @media (forced-colors: active) { + & svg, + &:hover svg, + &:active svg { + color: CanvasText; + } + } +} + // Mixin for button variants @mixin variant( $variant, @@ -44,48 +86,7 @@ } // Icon styles - & svg { - @if $icon-color { - color: var(--color-#{$icon-color}); - } @else { - color: var(--color-#{$text-color}); - } - - @if $icon-hover { - .root:hover & { - color: var(--color-#{$icon-hover}); - } - } @else if $text-hover { - .root:hover & { - color: var(--color-#{$text-hover}); - } - } - - @if $icon-active { - .root:active & { - color: var(--color-#{$icon-active}); - } - } @else if $text-active { - .root:active & { - color: var(--color-#{$text-active}); - } - } - - line-height: 0; - - // Forced colors mode support - @media (forced-colors: active) { - color: CanvasText; - - .root:hover & { - color: CanvasText; - } - - .root:active & { - color: CanvasText; - } - } - } + @include icon-colors($text-color, $text-hover, $text-active, $icon-color, $icon-hover, $icon-active); } } @@ -127,48 +128,7 @@ } // Icon styles - & svg { - @if $icon-color { - color: var(--color-#{$icon-color}); - } @else { - color: var(--color-#{$text-color}); - } - - @if $icon-hover { - .root:hover & { - color: var(--color-#{$icon-hover}); - } - } @else if $text-hover { - .root:hover & { - color: var(--color-#{$text-hover}); - } - } - - @if $icon-active { - .root:active & { - color: var(--color-#{$icon-active}); - } - } @else if $text-active { - .root:active & { - color: var(--color-#{$text-active}); - } - } - - line-height: 0; - - // Forced colors mode support - @media (forced-colors: active) { - color: CanvasText; - - .root:hover & { - color: CanvasText; - } - - .root:active & { - color: CanvasText; - } - } - } + @include icon-colors($text-color, $text-hover, $text-active, $icon-color, $icon-hover, $icon-active); } } @@ -239,7 +199,7 @@ 'container-success-active', 'container-success-on-success-container', 'container-success-on-success-container', - 'container-success-on-success-container-pressed' + 'container-success-on-success-container' ); // Positive variant - weak emphasis @@ -273,10 +233,7 @@ 'container-error-active', 'container-error-on-error-container', 'container-error-on-error-container', - 'container-error-on-error-container', - 'container-error-on-error-container', - 'button-negative-icon-hover', - 'button-negative-icon-pressed' + 'container-error-on-error-container' ); // Negative variant - weak emphasis @@ -372,32 +329,14 @@ color: var(--color-container-highlight-on-highlight-container); } - & svg { - color: var(--color-highlight-default); - - .root:hover & { - color: var(--color-container-highlight-on-highlight-container); - } - - .root:active & { - color: var(--color-container-highlight-on-highlight-container); - } - - line-height: 0; - - // Forced colors mode support - @media (forced-colors: active) { - color: CanvasText; - - .root:hover & { - color: CanvasText; - } - - .root:active & { - color: CanvasText; - } - } - } + @include icon-colors( + 'highlight-default', + 'container-highlight-on-highlight-container', + 'container-highlight-on-highlight-container', + null, + null, + null + ); } // Loud variant - strong emphasis From e705e3cf7118f2b0ceedaefb276510b364c3180e Mon Sep 17 00:00:00 2001 From: Red Ochsenbein Date: Mon, 3 Aug 2026 09:08:42 +0200 Subject: [PATCH 2/4] chore: revert small -pressed removal --- .../components/src/components/Button/styles/button.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/Button/styles/button.module.scss b/packages/components/src/components/Button/styles/button.module.scss index b5b6409a41..ccfa63d04c 100644 --- a/packages/components/src/components/Button/styles/button.module.scss +++ b/packages/components/src/components/Button/styles/button.module.scss @@ -199,7 +199,7 @@ 'container-success-active', 'container-success-on-success-container', 'container-success-on-success-container', - 'container-success-on-success-container' + 'container-success-on-success-container-pressed' ); // Positive variant - weak emphasis From ef413c888f79dcb104198a594aa53b3955a52aba Mon Sep 17 00:00:00 2001 From: Red Ochsenbein Date: Mon, 3 Aug 2026 09:10:23 +0200 Subject: [PATCH 3/4] chore: add changeset --- .changeset/good-years-divide.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/good-years-divide.md diff --git a/.changeset/good-years-divide.md b/.changeset/good-years-divide.md new file mode 100644 index 0000000000..3dffa4b823 --- /dev/null +++ b/.changeset/good-years-divide.md @@ -0,0 +1,6 @@ +--- +"@frontify/fondue-components": patch +"@frontify/fondue": patch +--- + +fix(Button): icon hover state colors From 41de508db9c28bcc01e98eb624e5a2ca9affc3e0 Mon Sep 17 00:00:00 2001 From: Red Ochsenbein Date: Mon, 3 Aug 2026 09:20:19 +0200 Subject: [PATCH 4/4] fix(ColorPicker test): adjust hover color expectation --- .../src/components/ColorPicker/__tests__/ColorPicker.ct.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/ColorPicker/__tests__/ColorPicker.ct.tsx b/packages/components/src/components/ColorPicker/__tests__/ColorPicker.ct.tsx index 963e3c6828..af31f1ed28 100644 --- a/packages/components/src/components/ColorPicker/__tests__/ColorPicker.ct.tsx +++ b/packages/components/src/components/ColorPicker/__tests__/ColorPicker.ct.tsx @@ -456,7 +456,7 @@ test('should display correct clearIcon colors in different hover states', async await clearButton.hover(); const clearButtonHoveredColor = await clearIcon.evaluate((el) => getComputedStyle(el).getPropertyValue('color')); console.log(clearButtonHoveredColor); - expect(clearButtonHoveredColor).toBe('rgb(17, 17, 16)'); + expect(clearButtonHoveredColor).toBe('rgb(53, 53, 51)'); }); test('should strip leading # when typing hex value', async ({ mount }) => {