Skip to content

Commit 5836c5d

Browse files
committed
Fix theme toggle hover/focus box artifact
- harden Ant Design text-button selectors for the theme toggle - remove hover/focus/active background, border, and shadow artifacts - preserve focus-visible outline for keyboard accessibility
1 parent 6b550ba commit 5836c5d

1 file changed

Lines changed: 10 additions & 2 deletions

File tree

src/components/Header/Header.scss

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232
margin-right: 8px;
3333
}
3434

35-
.theme_toggle.ant-btn {
35+
.theme_toggle.ant-btn,
36+
.theme_toggle.ant-btn.ant-btn-text,
37+
.theme_toggle.ant-btn.ant-btn-variant-text {
3638
border: none;
3739
box-shadow: none;
3840
background: transparent;
@@ -42,14 +44,20 @@
4244
color: var(--color-typo-primary);
4345

4446
&:hover,
45-
&:focus {
47+
&:focus,
48+
&:active {
4649
background: transparent;
50+
border-color: transparent;
51+
box-shadow: none;
4752
color: var(--color-typo-primary);
4853
}
4954

5055
&:focus-visible {
5156
outline: 2px solid var(--color-typo-brand);
5257
outline-offset: 2px;
58+
background: transparent;
59+
border-color: transparent;
60+
box-shadow: none;
5361
}
5462

5563
.anticon {

0 commit comments

Comments
 (0)