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

Author: cwelsys

src/components/_variables.scss

@@ -290,7 +290,9 @@
   // Accent coloured buttons
   --button-filled-brand-text: #{$crust};
   --button-filled-brand-background: #{$brand};
+  --button-filled-brand-text-hover: #{$crust};
   --button-filled-brand-background-hover: #{darken($brand, math.div(15%, 2))}; // TODO: Upcoming palette tints/shades
+  --button-filled-brand-text-active: #{$crust};
   --button-filled-brand-background-active: #{darken($brand, math.div(25%, 2))};
 
   --button-filled-brand-inverted-text: #{$crust};

src/components/tweaks/_dark.scss

@@ -16,6 +16,7 @@ svg[class^="checkmarkCircle"], div[class*="checkIcon_"],
 button[class*="button_"][class*="lookFilled_"][class*="colorRed_"],
 button[class*="button_"][class*="lookFilled_"][class*="colorGreen_"],
 button[class*="button_"][class*="lookFilled_"][class*="colorLink_"],
+button[class*="button_"][class*="lookFilled_"][class*="colorBrand_"],
 button[class*="colorable_"][class*="join_"], // Vc join buttons
 svg[class^="status_"], // Vc status (mute/deafen)
 svg[class^="dots_"], // typing indicator
@@ -32,6 +33,40 @@ div[class*="tooltipBrand_"], div[class*="tooltipGreen_"],
   --white-500: #{$crust};
 }
 
+// Force button text color for brand buttons
+button[class*="button_"][class*="lookFilled_"][class*="colorBrand_"] {
+  color: #{$crust} !important;
+}
+
+// Vencord buttons
+button[class*="vc-btn-primary"],
+button[class*="vc-btn-"][class*="vc-btn-primary"] {
+  color: #{$crust} !important;
+  background-color: #{$brand} !important;
+
+  &:hover {
+    background-color: #{darken($brand, math.div(15%, 2))} !important;
+  }
+
+  &:active {
+    background-color: #{darken($brand, math.div(25%, 2))} !important;
+  }
+}
+
+// Discord's standard primary buttons (with hashed class names)
+button[class*="button_"][class*="primary_"] {
+  color: #{$crust} !important;
+  background-color: #{$brand} !important;
+
+  &:hover {
+    background-color: #{darken($brand, math.div(15%, 2))} !important;
+  }
+
+  &:active {
+    background-color: #{darken($brand, math.div(25%, 2))} !important;
+  }
+}
+
 svg[class^="radioIndicator_"] [class*="refreshIcon_"] {
   fill: #{$crust};
 }