style(ai-chat): give the privacy consent line a gold frame matching the WhatsApp bridge

This commit is contained in:
heaven 2026-06-02 13:35:24 +03:00
parent d92f6dc1ca
commit 5f940af9f7

View file

@ -1,6 +1,11 @@
import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';
// DAWN `--amber` (stream-v2-dawn.jsx) — the "gold" accent the bridge widgets use for risk/notice
// callouts. folds has no amber token, and apps/widget-*/styles.css hardcode this same literal, so
// we match it here for the consent callout's gold frame.
const VOJO_GOLD = '#d4b88a';
// Centered privacy dialog — a fully self-styled card (NOT a folds modal recipe, whose fixed-rem
// sizing didn't give these caps and clipped the body in an earlier attempt). Owns its own surface,
// radius, border and shadow so the body fills the full width on every platform. Width caps at 520px
@ -94,17 +99,18 @@ export const SectionBody = style({
color: color.SurfaceVariant.OnContainer,
});
// "Using it = OK with this" — the consent line gets a soft fleet-tinted card with a fleet rule so
// it reads as the one binding sentence without shouting. Matches the DAWN raised-surface vocabulary.
// "Using it = OK with this" — the consent line is the one binding sentence, so it gets the gold
// callout treatment the WhatsApp bridge uses for its ToS-risk notice (apps/widget-whatsapp
// `.section-warn-banner`): a full amber frame + faint amber wash + amber text.
export const Consent = style({
margin: 0,
padding: config.space.S300,
borderRadius: config.radii.R400,
backgroundColor: color.Surface.ContainerActive,
borderLeft: `${toRem(3)} solid ${color.Primary.Main}`,
padding: `${toRem(12)} ${toRem(14)}`,
borderRadius: toRem(10),
border: `1px solid ${VOJO_GOLD}`,
backgroundColor: 'rgba(212, 184, 138, 0.1)',
fontSize: toRem(13),
lineHeight: toRem(19),
color: color.Surface.OnContainer,
lineHeight: toRem(18),
color: VOJO_GOLD,
});
export const Links = style({