From 113cfbef9d9bd9b896f2b94cdb76c0f15412de61 Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Tue, 24 Feb 2026 18:56:52 +0100 Subject: [PATCH 1/4] change iconButton and menu danger backgrounds --- src/icon-button.css.ts | 16 ++++++++-------- src/menu.css.ts | 14 ++++++++++++++ src/menu.tsx | 16 +++++++++++----- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/icon-button.css.ts b/src/icon-button.css.ts index b2137fd503..2a76afe812 100644 --- a/src/icon-button.css.ts +++ b/src/icon-button.css.ts @@ -280,32 +280,32 @@ export const iconButtonTokens = styleVariants({ 'danger-transparent-default': { vars: { [background]: 'transparent', - [backgroundHover]: skinVars.colors.backgroundContainerHover, - [backgroundActive]: skinVars.colors.backgroundContainerPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, [iconColor]: skinVars.colors.error, }, }, 'danger-transparent-brand': { vars: { [background]: skinVars.colors.buttonLinkDangerBackgroundBrand, - [backgroundHover]: skinVars.colors.backgroundContainerHover, - [backgroundActive]: skinVars.colors.backgroundContainerPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, [iconColor]: skinVars.colors.error, }, }, 'danger-transparent-negative': { vars: { [background]: skinVars.colors.buttonLinkDangerBackgroundBrand, - [backgroundHover]: skinVars.colors.backgroundContainerHover, - [backgroundActive]: skinVars.colors.backgroundContainerPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, [iconColor]: skinVars.colors.error, }, }, 'danger-transparent-alternative': { vars: { [background]: 'transparent', - [backgroundHover]: skinVars.colors.backgroundContainerHover, - [backgroundActive]: skinVars.colors.backgroundContainerPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, [iconColor]: skinVars.colors.error, }, }, diff --git a/src/menu.css.ts b/src/menu.css.ts index c9cd9bd05e..8f3d578459 100644 --- a/src/menu.css.ts +++ b/src/menu.css.ts @@ -95,6 +95,20 @@ export const menuItemHovered = style({ }, }); +export const menuItemHoveredDestructive = style({ + transition: 'background-color 0.1s ease-in-out', + backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed, + ':active': { + backgroundColor: skinVars.colors.buttonLinkDangerBackgroundPressed, + }, + '@media': { + [mq.touchableOnly]: { + backgroundColor: 'transparent', + transition: 'none', + }, + }, +}); + export const menuItemEnabled = style({ '@media': { [mq.touchableOnly]: { diff --git a/src/menu.tsx b/src/menu.tsx index 00a86f5865..a6b5f829fa 100644 --- a/src/menu.tsx +++ b/src/menu.tsx @@ -156,11 +156,17 @@ export const MenuItem = ({ return (
setFocusedItem(disabled ? null : itemIndex)} onMouseLeave={() => setFocusedItem(null)} > From b1a02a91da31854b4946988ec4185d1a2c2d1932 Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Tue, 24 Feb 2026 19:01:31 +0100 Subject: [PATCH 2/4] prettier --- src/menu.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/menu.tsx b/src/menu.tsx index a6b5f829fa..f85ae2cc65 100644 --- a/src/menu.tsx +++ b/src/menu.tsx @@ -156,17 +156,14 @@ export const MenuItem = ({ return (
setFocusedItem(disabled ? null : itemIndex)} onMouseLeave={() => setFocusedItem(null)} > From f187490b81bbcf065b339d1ab509c3009bfdc3d2 Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Tue, 24 Feb 2026 19:07:26 +0100 Subject: [PATCH 3/4] rollback change in alternative variant --- src/icon-button.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icon-button.css.ts b/src/icon-button.css.ts index 2a76afe812..80d399b25d 100644 --- a/src/icon-button.css.ts +++ b/src/icon-button.css.ts @@ -304,8 +304,8 @@ export const iconButtonTokens = styleVariants({ 'danger-transparent-alternative': { vars: { [background]: 'transparent', - [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, - [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundHover]: skinVars.colors.backgroundContainerHover, + [backgroundActive]: skinVars.colors.backgroundContainerPressed, [iconColor]: skinVars.colors.error, }, }, From 00b884526ad1cc68f66a887d954c53187d00d31d Mon Sep 17 00:00:00 2001 From: "Ignacio Ceballos (Yayo)" Date: Fri, 27 Feb 2026 15:47:32 +0100 Subject: [PATCH 4/4] Update icon-button.css.ts --- src/icon-button.css.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/icon-button.css.ts b/src/icon-button.css.ts index 80d399b25d..fe1dcab041 100644 --- a/src/icon-button.css.ts +++ b/src/icon-button.css.ts @@ -288,16 +288,16 @@ export const iconButtonTokens = styleVariants({ 'danger-transparent-brand': { vars: { [background]: skinVars.colors.buttonLinkDangerBackgroundBrand, - [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, - [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundBrandPressed, [iconColor]: skinVars.colors.error, }, }, 'danger-transparent-negative': { vars: { [background]: skinVars.colors.buttonLinkDangerBackgroundBrand, - [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundPressed, - [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundPressed, + [backgroundHover]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed, + [backgroundActive]: skinVars.colors.buttonLinkDangerBackgroundNegativePressed, [iconColor]: skinVars.colors.error, }, },