From 049a98a36aed3147f28138c67482e349ee30bbff Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:31:59 +0500
Subject: [PATCH] fix(website): restore footer CTA buttons on the light card
 inside the dark stage (#22447)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

The footer's **Talk to us** / **Get started** CTAs regressed: filled
rendered white-on-white (only the label showed) and outlined vanished
entirely. Resolves
[this](https://github.com/twentyhq/core-team-issues/issues/2634) issue.

## Why

#22241 marked the footer root as a dark menu-surface
(`data-scheme="dark"`) so the sticky menu adapts over the dark footer
stage. But the footer's content sits on a **white Card inside that
root**, and the button's dark override is a *descendant* selector
(`[data-scheme='dark'] &`) — so it leaked into the card. Filled → white
fill + black label (invisible fill on white); outlined → white stroke +
white label (fully invisible). The card's text was fine because it uses
the light default semantic vars; only the buttons key off the raw
attribute.

## Fix

- Mark the white `Card` as `data-scheme="light"` — it *is* a light
surface. The root keeps `data-menu-surface`/`data-scheme="dark"`, so
**menu adaptation is unchanged**.
- Add a button override scoped to `[data-scheme='dark']
[data-scheme='light'] &` — a light surface *nested inside* a dark one.
It's higher specificity than the dark rule and matches **only** this
footer case, so a dark card nested in a *light* section (e.g.
`HelpedCard`) is never affected. No other button changes.

Result: filled = black fill + white label, outlined = black stroke +
black label — matching the design.

## Testing

- `nx typecheck twenty-website` ✓ · `nx lint twenty-website` ✓
(check-conventions + oxlint + oxfmt)
- Reviewable on the PR preview (footer CTAs, plus menu/FAQ/hero/signoff
buttons unaffected).
---
 .../twenty-website/src/sections/footer/Footer.tsx  |  2 +-
 packages/twenty-website/src/ui/Button.tsx          | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-website/src/sections/footer/Footer.tsx b/packages/twenty-website/src/sections/footer/Footer.tsx
index b0b823a4f6..165f0da20d 100644
--- a/packages/twenty-website/src/sections/footer/Footer.tsx
+++ b/packages/twenty-website/src/sections/footer/Footer.tsx
@@ -54,7 +54,7 @@ export function Footer() {
     <FooterRoot data-menu-surface="" data-scheme="dark">
       <StageContainer>
         <FooterBackdrop />
-        <Card>
+        <Card data-scheme="light">
           <NotchedCardShape />
           <TwentyLogo sizePx={40} />
           <FooterNav />
diff --git a/packages/twenty-website/src/ui/Button.tsx b/packages/twenty-website/src/ui/Button.tsx
index 24df39442e..42e19ae3a1 100644
--- a/packages/twenty-website/src/ui/Button.tsx
+++ b/packages/twenty-website/src/ui/Button.tsx
@@ -76,6 +76,20 @@ const buttonClassName = css`
     --button-label-hover: ${color('white')};
   }
 
+  [data-scheme='dark'] [data-scheme='light'] &[data-variant='filled'] {
+    --button-fill: ${color('black')};
+    --button-hover-fill: ${color('black-hover')};
+    --button-label: ${color('white')};
+    --button-label-hover: ${color('white')};
+  }
+
+  [data-scheme='dark'] [data-scheme='light'] &[data-variant='outlined'] {
+    --button-stroke: ${color('black')};
+    --button-hover-fill: ${color('black')};
+    --button-label: ${color('black')};
+    --button-label-hover: ${color('black')};
+  }
+
   /* Outlined hovers are a 5% ink wash. The shape paints OPAQUE and the
      layer carries the opacity, so the wash composites once — segment
      overlaps can never double into seams, on any surface. */