fix(studio,www): repair Join us on Discord buttons (#47711)

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

The "Join us on Discord" buttons are broken in two places:

- **Studio support sidebar** (`HelpPanel`): on light mode the button
background is not white, so the intended white button with purple icon
and text is broken.
- **www `/support` page** (shared `secondary` button variant): the text
disappears on hover, and the Discord icon is never rendered (always
invisible). Both issues occur on light and dark mode.

## What is the new behavior?

- **Studio support sidebar**: force a white background on all colour
schemes via `bg-white hover:bg-white/90`, matching the existing pattern
in `DiscordCTACard`. The purple icon and text now render correctly on
light mode.
- **Shared `secondary` button variant** (`packages/ui`):
- The icon container used `text-border-muted`, which blended into the
`bg-foreground` button, so the icon was invisible. Changed to
`text-background` to match the button's text colour.
- The hover state used `text-border-stronger`, which had no contrast
against the background, so text disappeared on hover. Changed to
`text-background/80`.
- Removed the ineffective `fill="var(--background-default)"` from
`IconDiscord` on the `/support` page — the SVG path uses `currentColor`,
so the fill prop had no effect.

These `secondary` variant fixes apply globally, so other secondary
buttons benefit too.

| Before | After |
| --- | --- |
| <img width="868" height="642" alt="CleanShot 2026-07-07 at 15 39
42@2x"
src="https://github.com/user-attachments/assets/6897b6ba-311e-43c7-bb5a-7b70017a54cc"
/> | <img width="906" height="610" alt="CleanShot 2026-07-07 at 16 21
31@2x"
src="https://github.com/user-attachments/assets/16104cf0-8ed1-4857-8467-532c1f7fdb5f"
/> |
| <img width="636" height="620" alt="CleanShot 2026-07-07 at 15 24
53@2x"
src="https://github.com/user-attachments/assets/75f55f6c-eaa7-45ee-94fe-eac513126eff"
/> | <img width="656" height="404" alt="CleanShot 2026-07-07 at 16 24
23@2x"
src="https://github.com/user-attachments/assets/35649b23-fcdd-42fd-8140-e4aaf394667e"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **Style**
* Refreshed secondary button styling for a more consistent look,
including updated hover and loading text/icon colors.
* Improved the “Join us on Discord” button’s background and hover
appearance.
* Simplified the Discord card’s icon rendering to rely on the default
icon styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/ui/HelpPanel/HelpPanel.tsx

@@ -109,6 +109,7 @@ export const HelpPanel = ({
                     <Button
                       variant="secondary"
                       size="tiny"
+                      className="bg-white hover:bg-white/90"
                       icon={
                         <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
                       }

apps/www/data/support.tsx

@@ -19,7 +19,7 @@ const data = {
           label: 'Join us on Discord',
           link: 'https://discord.supabase.com/',
           target: '_blank',
-          icon: <IconDiscord fill="var(--background-default)" />,
+          icon: <IconDiscord />,
           type: 'secondary',
         },
       ],

packages/ui/src/components/Button/Button.tsx

@@ -51,7 +51,7 @@ const buttonVariants = cva(
           `,
         secondary: `
           bg-foreground
-          text-background hover:text-border-stronger
+          text-background hover:text-background/80
           focus-visible:text-border-control
           border-foreground-light hover:border-foreground-lighter
           focus-visible:outline-border-strong
@@ -157,7 +157,7 @@ const IconContainerVariants = cva('inline-flex items-center justify-center shrin
     variant: {
       primary: 'text-brand-600',
       default: 'text-foreground-lighter',
-      secondary: 'text-border-muted',
+      secondary: 'text-background',
       alternative: 'text-foreground-lighter',
       outline: 'text-foreground-lighter',
       dashed: 'text-foreground-lighter',
@@ -175,7 +175,7 @@ const loadingVariants = cva('', {
     variant: {
       primary: 'text-brand-600',
       default: 'text-foreground-lighter',
-      secondary: 'text-border-muted',
+      secondary: 'text-background',
       alternative: 'text-foreground-lighter',
       outline: 'text-foreground-lighter',
       dashed: 'text-foreground-lighter',