diff --git a/src/app/features/bots/AiChatPrivacy.css.ts b/src/app/features/bots/AiChatPrivacy.css.ts index b75c5690..f32db2b3 100644 --- a/src/app/features/bots/AiChatPrivacy.css.ts +++ b/src/app/features/bots/AiChatPrivacy.css.ts @@ -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({