From 0d64246d784112bd1f2680726be8057d1876e84f Mon Sep 17 00:00:00 2001 From: Bob Lee Date: Fri, 11 Sep 2026 16:24:19 +0800 Subject: [PATCH] fix(ui): suppress native button hover highlights --- .../packages/ui/src/components/Button/Button.module.css | 8 ++++++++ .../ui/src/components/IconButton/IconButton.module.css | 4 ++++ 2 files changed, 12 insertions(+) diff --git a/design-system/packages/ui/src/components/Button/Button.module.css b/design-system/packages/ui/src/components/Button/Button.module.css index 643869ff5d..519dbc413e 100644 --- a/design-system/packages/ui/src/components/Button/Button.module.css +++ b/design-system/packages/ui/src/components/Button/Button.module.css @@ -16,6 +16,9 @@ --_button-trailing-icon-size: 14px; position: relative; + /* The component owns its surface; suppress native WebKit button highlights. */ + -webkit-appearance: none; + appearance: none; display: inline-flex; align-items: center; justify-content: center; @@ -293,6 +296,11 @@ } @media (prefers-reduced-motion: reduce) { + .button, + .button::before { + transition: none; + } + .button[data-loading="true"] .progress { animation: none; border-inline-end-color: currentColor; diff --git a/design-system/packages/ui/src/components/IconButton/IconButton.module.css b/design-system/packages/ui/src/components/IconButton/IconButton.module.css index 5de42e6f72..b59cd67b1d 100644 --- a/design-system/packages/ui/src/components/IconButton/IconButton.module.css +++ b/design-system/packages/ui/src/components/IconButton/IconButton.module.css @@ -8,6 +8,9 @@ --_icon-button-size: var(--openbitfun-control-height-sm); position: relative; + /* Match Button: the pseudo-element owns hover feedback, not the native control. */ + -webkit-appearance: none; + appearance: none; box-sizing: border-box; display: inline-flex; flex: 0 0 auto; @@ -175,6 +178,7 @@ @media (prefers-reduced-motion: reduce) { .button, + .button::before, .progress { transition: none; }