style(ai-chat): give the privacy consent line a gold frame matching the WhatsApp bridge
This commit is contained in:
parent
d92f6dc1ca
commit
5f940af9f7
1 changed files with 14 additions and 8 deletions
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue