fix(website): restore footer CTA buttons on the light card inside the dark stage (#22447)

## 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).
This commit is contained in:
Abdullah.
2026-07-02 16:31:59 +05:00
committed by GitHub
parent 38fbff465f
commit 049a98a36a
2 changed files with 15 additions and 1 deletions
@@ -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 />
+14
View File
@@ -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. */