Skip to content

Commit 1b2dffb

Browse files
authored
fix: button text contrast and hover states (#420) (#424)
- Add button text color overrides for brand/primary buttons to ensure readability - Fix hover/active states to use accent color instead of Discord purple - Support both Discord's standard buttons and Vencord buttons - Add missing hover/active text color CSS variables
1 parent 70acffa commit 1b2dffb

File tree

2 files changed

+37
-0
lines changed

2 files changed

+37
-0
lines changed

src/components/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,9 @@
290290
// Accent coloured buttons
291291
--button-filled-brand-text: #{$crust};
292292
--button-filled-brand-background: #{$brand};
293+
--button-filled-brand-text-hover: #{$crust};
293294
--button-filled-brand-background-hover: #{darken($brand, math.div(15%, 2))}; // TODO: Upcoming palette tints/shades
295+
--button-filled-brand-text-active: #{$crust};
294296
--button-filled-brand-background-active: #{darken($brand, math.div(25%, 2))};
295297

296298
--button-filled-brand-inverted-text: #{$crust};

src/components/tweaks/_dark.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ svg[class^="checkmarkCircle"], div[class*="checkIcon_"],
1616
button[class*="button_"][class*="lookFilled_"][class*="colorRed_"],
1717
button[class*="button_"][class*="lookFilled_"][class*="colorGreen_"],
1818
button[class*="button_"][class*="lookFilled_"][class*="colorLink_"],
19+
button[class*="button_"][class*="lookFilled_"][class*="colorBrand_"],
1920
button[class*="colorable_"][class*="join_"], // Vc join buttons
2021
svg[class^="status_"], // Vc status (mute/deafen)
2122
svg[class^="dots_"], // typing indicator
@@ -32,6 +33,40 @@ div[class*="tooltipBrand_"], div[class*="tooltipGreen_"],
3233
--white-500: #{$crust};
3334
}
3435

36+
// Force button text color for brand buttons
37+
button[class*="button_"][class*="lookFilled_"][class*="colorBrand_"] {
38+
color: #{$crust} !important;
39+
}
40+
41+
// Vencord buttons
42+
button[class*="vc-btn-primary"],
43+
button[class*="vc-btn-"][class*="vc-btn-primary"] {
44+
color: #{$crust} !important;
45+
background-color: #{$brand} !important;
46+
47+
&:hover {
48+
background-color: #{darken($brand, math.div(15%, 2))} !important;
49+
}
50+
51+
&:active {
52+
background-color: #{darken($brand, math.div(25%, 2))} !important;
53+
}
54+
}
55+
56+
// Discord's standard primary buttons (with hashed class names)
57+
button[class*="button_"][class*="primary_"] {
58+
color: #{$crust} !important;
59+
background-color: #{$brand} !important;
60+
61+
&:hover {
62+
background-color: #{darken($brand, math.div(15%, 2))} !important;
63+
}
64+
65+
&:active {
66+
background-color: #{darken($brand, math.div(25%, 2))} !important;
67+
}
68+
}
69+
3570
svg[class^="radioIndicator_"] [class*="refreshIcon_"] {
3671
fill: #{$crust};
3772
}

0 commit comments

Comments
 (0)