/** * @legalshield/stratos-tokens — base scale tokens. * * Brand-agnostic primitives that back the Stratos application-UI surface * (text, surfaces, borders, primary actions). Semantic mappings * (--color-primary, --color-on-surface, etc.) live under [data-brand=""] in * `brands/.css`. See ADR-0003 (brand cascade) and ADR-0008 (theme axis). * * Scope note: marketing-oriented palettes (decorative accent quintet) are * intentionally NOT shipped here. Stratos is the app-UI token kit; marketing * surfaces live in a separate kit and are unlikely to consume this monorepo. * Source: brands/legalshield.md. (GOONIE-2429 Tier-1: `--stratos-warm-200` IS * shipped — it backs the LegalShield warm page background. Its lighter pair * `warm-100` / surface-warm-subtle is deferred with the Tier-3 warm surfaces.) */ :root { /** * @tokens Color / Scale * @presenter Color */ /* ---------- Color: Purple (LegalShield brand hue) ---------- * Hue-named on purpose: primitives are shared on :root across brands, so * role names like "primary" belong to the semantic layer (brands/.css), * which decides what each brand's primary is. */ --stratos-purple-100: #eef1ff; /* subtle wash, light mode */ --stratos-purple-500: #692bee; /* default — always-on brand purple */ --stratos-purple-600: #581ed4; /* hover */ --stratos-purple-700: #4a16b8; /* active/pressed — LS primary-active (light) */ --stratos-purple-950: #2e2a3a; /* subtle wash, dark mode */ /* ---------- Blue (IDShield) ---------- * Legacy-derived (adonis-design-service idshield.css) pending design review * in the GOONIE-2429 reconciliation. 100/500 are legacy anchors; 600/950 are * derived (600 = legacy button-active blue; 950 = dark-mode subtle wash, * blue analog of --stratos-purple-950). */ --stratos-blue-100: #e9efff; /* subtle wash, light mode (legacy prim50) */ --stratos-blue-500: #3050f0; /* default — always-on IDShield blue (legacy prim200) */ --stratos-blue-600: #2b46b5; /* hover (legacy btn-primary-active) */ --stratos-blue-950: #2a2e3f; /* subtle wash, dark mode (derived) */ /* ---------- Color: Warm (warm neutral, light mode only) ---------- * Backs the LegalShield warm page background. GOONIE-2429 Tier-1 * (decision 2). No dark-mode counterpart in the spec. */ --stratos-warm-200: #f5f4ee; /* warm page background, light mode */ /* ---------- Color: Neutral (cool gray ramp) ---------- */ --stratos-neutral-white: #ffffff; --stratos-neutral-100: #fefefd; --stratos-neutral-150: #e6e8ec; /* dark-mode action hover (near-white) */ --stratos-neutral-200: #fafafb; --stratos-neutral-250: #d0d4db; /* dark-mode action active */ --stratos-neutral-300: #f7f7f8; --stratos-neutral-400: #f4f4f5; --stratos-neutral-450: #a9abad; /* light-mode disabled foreground */ --stratos-neutral-500: #d4d5d6; --stratos-neutral-550: #aeb1b6; /* dark-mode muted text — ~6.4:1 on neutral-900, fills the 500↔600 gap */ --stratos-neutral-600: #949699; --stratos-neutral-650: #6f7686; /* dark-mode disabled foreground / border-hover */ --stratos-neutral-700: #74777a; --stratos-neutral-750: #2e333d; /* dark-mode surface-subtle / input */ --stratos-neutral-800: #54575c; --stratos-neutral-850: #323843; /* dark-mode elevated surface — one step above neutral-900 for depth (GOONIE-2429 decision 3) */ --stratos-neutral-900: #292d33; --stratos-neutral-925: #25282e; /* light-mode secondary-active (near-black pressed) */ --stratos-neutral-black: #1d1c1a; /* ---------- Color: State (semantic status) ---------- */ /* Role-split as of GOONIE-2551. Each status hue serves distinct roles that * pull in opposite directions, so one value per theme cannot satisfy them all: * * -600 pinned FILL (identical in both themes); also the light-theme INK for * error and info, whose fill is dark enough to double as text * -400 dark-theme INK (text/icon on a dark surface) * -700 light-theme INK where the fill is too light to double as ink * (success and warning) * -300 dark-theme INK where the -400 step is too dark (error) * -500 legacy GOONIE-2189 V3 status-icon seeds — RETAINED because * registry/src/ui/badge.tsx and scripts/review-icon-mapping.mjs * reference them directly. No longer used by the semantic layer. * * See packages/stratos-tokens/README.md for the role-to-token mapping. * * DESIGN-APPROVED (GOONIE-2551 AC-06 — Matt Reiswig, 2026-07-29). Design chose * fills closer to the original hues than engineering's first candidates; the * approved green #20874d clears AA as a fill (4.53:1 with white) but not as * text on the warm page background (4.11:1), so success took the same * fill/ink split warning already has. Every pairing is asserted by * tests/status-contrast.test.ts — swapping a value re-measures all of them. */ --stratos-success-600: #20874d; --stratos-success-700: #1d7a46; --stratos-success-500: #219653; --stratos-success-400: #59d477; --stratos-warning-700: #7a6000; --stratos-warning-500: #ffd60a; --stratos-warning-400: #ffeb8a; --stratos-error-600: #d5001a; --stratos-error-500: #d70015; --stratos-error-400: #ff5767; --stratos-error-300: #ff7d89; --stratos-info-600: #3b5bde; --stratos-info-500: #3559e9; --stratos-info-400: #a8b7f5; /* ---------- Color: State surfaces (status background pairs) ---------- * `-500` = light-theme background, `-400` = dark-theme background. * GOONIE-2429 Tier-1 additions (decision 4). */ --stratos-success-surface-500: #effbf2; --stratos-success-surface-400: #071c0d; --stratos-warning-surface-500: #fffceb; --stratos-warning-surface-400: #241e00; --stratos-error-surface-500: #ffebed; --stratos-error-surface-400: #240002; --stratos-info-surface-500: #edf0fd; --stratos-info-surface-400: #050b29; /** * @tokens-end */ /** * @tokens Typography / Families * @presenter FontFamily */ /* ---------- Typography: families (self-hosted via fonts.css — GOONIE-2195) ---------- */ --stratos-font-display: 'ABC Otto', Georgia, serif; --stratos-font-body: 'Instrument Rounded', -apple-system, system-ui, Arial, sans-serif; /** * @tokens-end */ /** * @tokens Typography / Scale * @presenter FontSize */ /* ---------- Typography: scale ---------- */ --stratos-font-size-h1: 72px; --stratos-line-height-h1: 72px; --stratos-letter-spacing-h1: -3.6px; --stratos-font-size-h2: 56px; --stratos-line-height-h2: 56px; --stratos-letter-spacing-h2: -2.8px; --stratos-font-size-h3: 48px; --stratos-line-height-h3: 50.4px; --stratos-letter-spacing-h3: -1.92px; --stratos-font-size-h4: 40px; --stratos-line-height-h4: 44px; --stratos-letter-spacing-h4: -1.2px; --stratos-font-size-h5: 32px; --stratos-line-height-h5: 35.2px; --stratos-letter-spacing-h5: -0.96px; --stratos-font-size-h6: 24px; --stratos-line-height-h6: 28.8px; --stratos-letter-spacing-h6: 0; --stratos-font-size-body-xl: 22px; --stratos-line-height-body-xl: 33px; --stratos-letter-spacing-body-xl: 0; --stratos-font-size-body-lg: 18px; --stratos-line-height-body-lg: 27px; --stratos-letter-spacing-body-lg: 0; --stratos-font-size-body: 16px; --stratos-line-height-body: 24px; --stratos-letter-spacing-body: 0; --stratos-font-size-body-sm: 14px; --stratos-line-height-body-sm: 21px; --stratos-letter-spacing-body-sm: 0; --stratos-font-size-body-xs: 12px; --stratos-line-height-body-xs: 18px; --stratos-letter-spacing-body-xs: 0; --stratos-font-size-eyebrow: 16px; --stratos-line-height-eyebrow: 24px; --stratos-letter-spacing-eyebrow: 0; --stratos-font-size-button-lg: 16px; --stratos-line-height-button-lg: 24px; --stratos-letter-spacing-button-lg: 0; --stratos-font-size-button-md: 14px; --stratos-line-height-button-md: 21px; --stratos-letter-spacing-button-md: 0; --stratos-font-weight-display: 300; --stratos-font-weight-body: 400; --stratos-font-weight-body-medium: 500; --stratos-font-weight-semibold: 600; /** * @tokens-end */ /** * @tokens Spacing * @presenter Spacing */ /* ---------- Spacing: scale (component-level margin/padding steps) ---------- * GOONIE-2429 Tier-1 additions — the spec's flat `spacing:` scale. */ --stratos-spacing-none: 0px; --stratos-spacing-2xs: 4px; --stratos-spacing-xs: 8px; --stratos-spacing-sm: 16px; --stratos-spacing-md: 24px; --stratos-spacing-lg: 32px; --stratos-spacing-xl: 48px; --stratos-spacing-2xl: 56px; /* ---------- Spacing: section rhythm (vertical spacing between page sections) ---------- */ --stratos-spacing-section-2xs: 16px; --stratos-spacing-section-xs: 24px; --stratos-spacing-section-sm: 32px; --stratos-spacing-section-md: 48px; --stratos-spacing-section-lg: 64px; --stratos-spacing-section-xl: 80px; --stratos-spacing-section-2xl: 120px; /* ---------- Spacing: grid/flex gaps ---------- */ --stratos-spacing-gap-button: 8px; --stratos-spacing-gap-sm: 16px; --stratos-spacing-gap-md: 24px; --stratos-spacing-gap-lg: 32px; --stratos-spacing-gap-xl: 80px; /* ---------- Spacing: responsive page margins ---------- * sm/lg/2xl are VIEWPORT TIERS (breakpoints), not size steps — sm and lg * genuinely share 32px today; 2xl widens to 120px. screen-guide is the * Figma screen-guide gutter. PROVISIONAL — confirm tiers + values with * design before components consume these. */ --stratos-page-margin-sm: 32px; --stratos-page-margin-lg: 32px; --stratos-page-margin-2xl: 120px; --stratos-spacing-screen-guide: 66px; /** * @tokens-end */ /** * @tokens Radius * @presenter BorderRadius */ /* ---------- Radius ---------- */ /* xs/sm are GOONIE-2429 Tier-1 additions (decision 5). --stratos-radius-rounded * is kept temporarily — Task 2 repoints the semantic --radius-sm (currently * -> rounded/5px) to -> sm/8px; don't remove rounded here. */ --stratos-radius-xs: 4px; --stratos-radius-sm: 8px; --stratos-radius-rounded: 5px; --stratos-radius-md: 12px; --stratos-radius-lg: 16px; --stratos-radius-xl: 24px; --stratos-radius-pill: 100px; /** * @tokens-end */ /* ---------- Z-index: overlay scale (GOONIE-2434 N3) ---------- * Ranks header dropdown/tooltip portals (SupportMenu/ThemeSwitcher/ * LanguagePicker/UserMenu) above in-flow content; host apps may re-rank. */ --stratos-z-overlay: 50; } /** * @legalshield/stratos-tokens — LegalShield brand semantic tokens. * * Two composable axes (see ADR-0003 + ADR-0008): * [data-brand="legalshield"] → brand defaults (light) * [data-brand="legalshield"][data-theme="dark"] → dark-mode overrides * * Consumers activate by setting `data-brand="legalshield"` and (optionally) * `data-theme="dark"` on any ancestor — typically . Brands and themes * can coexist on the same page; setting `data-theme` on a subtree flips just * that subtree. * * Light is the default — no theme attribute needed. Don't put hex values * here; reference scale tokens from base.css. New primitives go to base.css * first. */ [data-brand='legalshield'] { /* Hint native UA controls (form widgets, scrollbars, autofill) to render * for the active theme. Without this, dark surfaces still get light-mode * form controls. */ color-scheme: light; /** * @tokens Color / Semantic * @presenter Color */ /* ---------- Color: Action (theme-aware) ---------- */ --color-primary: var(--stratos-purple-500); --color-primary-hover: var(--stratos-purple-600); --color-primary-active: var(--stratos-purple-700); --color-secondary: var(--stratos-neutral-900); --color-secondary-hover: var(--stratos-neutral-850); --color-secondary-active: var(--stratos-neutral-925); --color-tertiary: var(--stratos-neutral-900); /* ---------- Color: Accent (always-on brand purple) ---------- * Use for accented text, links, and subtle bg washes. Stays purple in * both themes — distinct from --color-primary, which is theme-aware. */ --color-accent: var(--stratos-purple-500); --color-accent-surface: var(--stratos-purple-100); /* On-color for the accent fill. Pinned like the fill itself — accent stays purple * in both themes, so a --color-surface foreground would invert to 1.78:1 in dark. * White is the only value that clears AA against purple-500 (6.60:1). */ --color-on-accent: var(--stratos-neutral-white); /* ---------- Color: Text ---------- */ --color-on-surface: var(--stratos-neutral-900); /* neutral-700 (#74777a) measured only 4.09:1 on the warm page background * (below the 4.5:1 text minimum) and 4.50:1 on white — zero margin * (GOONIE-2503 AC-01). neutral-800 (#54575c) lifts muted text to ~6.6:1 on * the warm background and ~7.3:1 on white, clearing AA on both surfaces * with margin while staying visibly muted below on-surface (neutral-900). */ --color-on-surface-muted: var(--stratos-neutral-800); --color-on-surface-disabled: var(--stratos-neutral-450); --color-on-inverse: var(--stratos-neutral-white); /* On-color text: sits atop a filled --color-primary/--color-secondary chip * or button, never atop the page/surface directly. */ --color-on-primary: var(--stratos-neutral-white); --color-on-secondary: var(--stratos-neutral-white); /* ---------- Color: Surfaces ---------- */ /* Page background is a warm off-white (GOONIE-2429 decision 2) — distinct from the neutral surfaces stacked on top of it, so cards/header read as elevated white/subtle/muted steps above a warm page (mirrors the dark cascade, where background 900 < surface 850 < surface-subtle 750). */ --color-background: var(--stratos-warm-200); --color-background-disabled: var(--stratos-neutral-400); --color-surface: var(--stratos-neutral-white); --color-surface-subtle: var(--stratos-neutral-100); --color-surface-muted: var(--stratos-neutral-400); --color-surface-inverse: var(--stratos-neutral-900); /* Highlighted-card fill (e.g. UserMenu's member-ID strip) — warm in light, swaps to the dark-mode surface-subtle step below so it never reads as a glaring light patch on a dark card (GOONIE-2434 round 12). */ --color-surface-warm: var(--stratos-warm-200); /* ---------- Color: Border ---------- */ --color-border: var(--stratos-neutral-500); --color-border-hover: var(--stratos-neutral-700); --color-border-strong: var(--stratos-neutral-900); /* ---------- Color: State (semantic status) ---------- * Role-split per GOONIE-2551. FOUR tokens per hue, ONE role each: * * --color- solid FILL (chip, button, banner, icon disc). * PINNED — declared here only, so it is identical in * both themes. That is what lets a fill paired with a * hardcoded white foreground (shadcn's destructive * button) clear AA in dark mode with no override. * --color-on- foreground ON that fill. Also pinned. * --color--text INK: text/icon on a page surface or tint. Flips. * --color--surface tinted backdrop. Flips. * * Utilities are role-aware: `bg-`/`border-` → fill, `text-` → ink, * `text-on-` → on-color. So `bg-warning text-on-warning` is correct and * `bg-error text-error` is not (ink on its own fill is invisible). * Every pairing is asserted >= 4.5:1 by tests/status-contrast.test.ts. */ --color-success: var(--stratos-success-600); --color-warning: var(--stratos-warning-500); --color-error: var(--stratos-error-600); --color-info: var(--stratos-info-600); /* On-color foregrounds for the fills above. warning is a light caution-yellow, * so it takes a DARK glyph; the others take white. Pinned with their fills. */ --color-on-success: var(--stratos-neutral-white); --color-on-warning: var(--stratos-neutral-900); --color-on-error: var(--stratos-neutral-white); --color-on-info: var(--stratos-neutral-white); /* Ink — status text/icons on a surface. Coincides with the fill for * success/error/info (a fill dark enough for white text also reads on white); * warning needs a dedicated dark step because no caution-yellow is legible. */ --color-success-text: var(--stratos-success-700); --color-warning-text: var(--stratos-warning-700); --color-error-text: var(--stratos-error-600); --color-info-text: var(--stratos-info-600); /* Low-contrast tinted backdrops for status banners/badges — pair with the * solid --color-success/warning/error/info above for the icon/foreground. */ --color-success-surface: var(--stratos-success-surface-500); --color-warning-surface: var(--stratos-warning-surface-500); --color-error-surface: var(--stratos-error-surface-500); --color-info-surface: var(--stratos-info-surface-500); /** * @tokens-end */ /** * @tokens Typography / Semantic * @presenter FontFamily */ /* ---------- Typography ---------- */ --font-display: var(--stratos-font-display); --font-body: var(--stratos-font-body); /** * @tokens-end */ /** * @tokens Radius / Semantic * @presenter BorderRadius */ /* ---------- Radius ---------- */ --radius-xs: var(--stratos-radius-xs); --radius-sm: var(--stratos-radius-sm); --radius-md: var(--stratos-radius-md); --radius-lg: var(--stratos-radius-lg); --radius-xl: var(--stratos-radius-xl); --radius-pill: var(--stratos-radius-pill); /** * @tokens-end */ } [data-brand='legalshield'][data-theme='dark'] { color-scheme: dark; /* Action colors flip to white in dark for contrast against the dark surface. * --color-accent stays purple (brand identity); --color-primary tracks the * surface. */ --color-primary: var(--stratos-neutral-white); /* Deepened one step (GOONIE-2508): neutral-150/250 read as barely-visible on the * white dark-mode primary fill; 550/600 give an unmistakable hover/pressed. */ --color-primary-hover: var(--stratos-neutral-550); --color-primary-active: var(--stratos-neutral-600); --color-secondary: var(--stratos-neutral-white); --color-secondary-hover: var(--stratos-neutral-150); --color-secondary-active: var(--stratos-neutral-250); --color-tertiary: var(--stratos-neutral-white); --color-accent-surface: var(--stratos-purple-950); --color-on-surface: var(--stratos-neutral-white); /* neutral-600 (#949699) sat at ~4.67:1 — technically AA but weak for copy. * neutral-550 lifts muted text to ~6.4:1 on the dark surface. */ --color-on-surface-muted: var(--stratos-neutral-550); --color-on-surface-disabled: var(--stratos-neutral-650); --color-on-inverse: var(--stratos-neutral-900); --color-on-primary: var(--stratos-neutral-900); --color-on-secondary: var(--stratos-neutral-900); /* Surface sits one step above the page background (neutral-850 vs -900) so * header/sidebar/cards read as elevated instead of merging into the page. * surface-subtle (750) and surface-muted (900) extend that same ladder. */ --color-background: var(--stratos-neutral-900); --color-background-disabled: var(--stratos-neutral-900); --color-surface: var(--stratos-neutral-850); --color-surface-subtle: var(--stratos-neutral-750); --color-surface-muted: var(--stratos-neutral-900); --color-surface-inverse: var(--stratos-neutral-white); /* Dark-mode-appropriate swap for the fixed warm strip (round 12) — reuses the existing surface-subtle/input step rather than a glaring light warm patch. */ --color-surface-warm: var(--stratos-neutral-750); --color-border: var(--stratos-neutral-800); --color-border-hover: var(--stratos-neutral-650); --color-border-strong: var(--stratos-neutral-600); /* State: only the INK flips in dark. The fill and its on-color are PINNED — * deliberately NOT redeclared here, so the [data-brand] declaration above * still applies. Redeclaring them would silently reintroduce the theme flip * that made white-on-fill fail AA in dark (GOONIE-2551). */ --color-success-text: var(--stratos-success-400); --color-warning-text: var(--stratos-warning-400); --color-error-text: var(--stratos-error-300); --color-info-text: var(--stratos-info-400); /* Low-contrast tinted backdrops for status banners/badges in dark mode. */ --color-success-surface: var(--stratos-success-surface-400); --color-warning-surface: var(--stratos-warning-surface-400); --color-error-surface: var(--stratos-error-surface-400); --color-info-surface: var(--stratos-info-surface-400); } /** * @legalshield/stratos-tokens — IDShield brand semantic tokens. * * Two composable axes (see ADR-0003 + ADR-0008): * [data-brand="idshield"] → brand defaults (light) * [data-brand="idshield"][data-theme="dark"] → dark-mode overrides * * Structural mirror of legalshield.css — same semantic surface, blue accents. * Blue scale values are legacy-derived (see base.css) pending GOONIE-2429 * design review. Fonts are the shared Stratos type system (ADR-0009) — no * brand-specific fonts. Don't put hex values here; reference scale tokens * from base.css. */ [data-brand='idshield'] { /* Hint native UA controls (form widgets, scrollbars, autofill) to render * for the active theme. Without this, dark surfaces still get light-mode * form controls. */ color-scheme: light; /** * @tokens Color / Semantic * @presenter Color */ /* ---------- Color: Action (theme-aware) ---------- */ --color-primary: var(--stratos-blue-500); --color-primary-hover: var(--stratos-blue-600); /* GOONIE-2429 follow-up: idshield primary-active is interim (= hover blue-600); * dedicated pressed-blue + any warm-surface treatment await idshield design * review. */ --color-primary-active: var(--stratos-blue-600); --color-secondary: var(--stratos-neutral-900); --color-secondary-hover: var(--stratos-neutral-850); --color-secondary-active: var(--stratos-neutral-925); --color-tertiary: var(--stratos-neutral-900); /* ---------- Color: Accent (always-on IDShield blue) ---------- * Use for accented text, links, and subtle bg washes. Stays blue in * both themes — distinct from --color-primary, which is theme-aware. */ --color-accent: var(--stratos-blue-500); --color-accent-surface: var(--stratos-blue-100); /* On-color for the accent fill. Pinned like the fill itself — accent stays blue * in both themes, so a --color-surface foreground would invert between themes * against a disc that does not. White clears AA against blue-500 (5.95:1). */ --color-on-accent: var(--stratos-neutral-white); /* ---------- Color: Text ---------- */ --color-on-surface: var(--stratos-neutral-900); /* neutral-700 (#74777a) measured only 4.09:1 on the warm page background * (below the 4.5:1 text minimum) and 4.50:1 on white — zero margin * (GOONIE-2503 AC-01). neutral-800 (#54575c) lifts muted text to ~6.6:1 on * the warm background and ~7.3:1 on white, clearing AA on both surfaces * with margin while staying visibly muted below on-surface (neutral-900). */ --color-on-surface-muted: var(--stratos-neutral-800); --color-on-surface-disabled: var(--stratos-neutral-450); --color-on-inverse: var(--stratos-neutral-white); /* On-color text: sits atop a filled --color-primary/--color-secondary chip * or button, never atop the page/surface directly. */ --color-on-primary: var(--stratos-neutral-white); --color-on-secondary: var(--stratos-neutral-white); /* ---------- Color: Surfaces ---------- */ /* Page background is the same warm off-white as LegalShield's (GOONIE-2434 design call by Evan — idshield no longer keeps a neutral-white page). Surfaces/cards stay white, one step above the warm page, mirroring legalshield.css's ladder. */ --color-background: var(--stratos-warm-200); --color-background-disabled: var(--stratos-neutral-400); --color-surface: var(--stratos-neutral-white); --color-surface-subtle: var(--stratos-neutral-100); --color-surface-muted: var(--stratos-neutral-400); --color-surface-inverse: var(--stratos-neutral-900); /* Highlighted-card fill (e.g. UserMenu's member-ID strip) — warm in light, swaps to the dark-mode surface-subtle step below so it never reads as a glaring light patch on a dark card (GOONIE-2434 round 12). */ --color-surface-warm: var(--stratos-warm-200); /* ---------- Color: Border ---------- */ --color-border: var(--stratos-neutral-500); --color-border-hover: var(--stratos-neutral-700); --color-border-strong: var(--stratos-neutral-900); /* ---------- Color: State (semantic status) ---------- * Role-split per GOONIE-2551. FOUR tokens per hue, ONE role each: * * --color- solid FILL (chip, button, banner, icon disc). * PINNED — declared here only, so it is identical in * both themes. That is what lets a fill paired with a * hardcoded white foreground (shadcn's destructive * button) clear AA in dark mode with no override. * --color-on- foreground ON that fill. Also pinned. * --color--text INK: text/icon on a page surface or tint. Flips. * --color--surface tinted backdrop. Flips. * * Utilities are role-aware: `bg-`/`border-` → fill, `text-` → ink, * `text-on-` → on-color. So `bg-warning text-on-warning` is correct and * `bg-error text-error` is not (ink on its own fill is invisible). * Every pairing is asserted >= 4.5:1 by tests/status-contrast.test.ts. */ --color-success: var(--stratos-success-600); --color-warning: var(--stratos-warning-500); --color-error: var(--stratos-error-600); --color-info: var(--stratos-info-600); /* On-color foregrounds for the fills above. warning is a light caution-yellow, * so it takes a DARK glyph; the others take white. Pinned with their fills. */ --color-on-success: var(--stratos-neutral-white); --color-on-warning: var(--stratos-neutral-900); --color-on-error: var(--stratos-neutral-white); --color-on-info: var(--stratos-neutral-white); /* Ink — status text/icons on a surface. Coincides with the fill for * success/error/info (a fill dark enough for white text also reads on white); * warning needs a dedicated dark step because no caution-yellow is legible. */ --color-success-text: var(--stratos-success-700); --color-warning-text: var(--stratos-warning-700); --color-error-text: var(--stratos-error-600); --color-info-text: var(--stratos-info-600); /* Low-contrast tinted backdrops for status banners/badges — pair with the * solid --color-success/warning/error/info above for the icon/foreground. */ --color-success-surface: var(--stratos-success-surface-500); --color-warning-surface: var(--stratos-warning-surface-500); --color-error-surface: var(--stratos-error-surface-500); --color-info-surface: var(--stratos-info-surface-500); /** * @tokens-end */ /** * @tokens Typography / Semantic * @presenter FontFamily */ /* ---------- Typography ---------- */ --font-display: var(--stratos-font-display); --font-body: var(--stratos-font-body); /** * @tokens-end */ /** * @tokens Radius / Semantic * @presenter BorderRadius */ /* ---------- Radius ---------- */ --radius-xs: var(--stratos-radius-xs); --radius-sm: var(--stratos-radius-sm); --radius-md: var(--stratos-radius-md); --radius-lg: var(--stratos-radius-lg); --radius-xl: var(--stratos-radius-xl); --radius-pill: var(--stratos-radius-pill); /** * @tokens-end */ } [data-brand='idshield'][data-theme='dark'] { color-scheme: dark; /* Action colors flip to white in dark for contrast against the dark surface. * --color-accent stays blue (brand identity); --color-primary tracks the * surface. Mirrors legalshield.css dark. */ --color-primary: var(--stratos-neutral-white); /* Deepened one step (GOONIE-2508): neutral-150/250 read as barely-visible on the * white dark-mode primary fill; 550/600 give an unmistakable hover/pressed. */ --color-primary-hover: var(--stratos-neutral-550); --color-primary-active: var(--stratos-neutral-600); --color-secondary: var(--stratos-neutral-white); --color-secondary-hover: var(--stratos-neutral-150); --color-secondary-active: var(--stratos-neutral-250); --color-tertiary: var(--stratos-neutral-white); --color-accent-surface: var(--stratos-blue-950); --color-on-surface: var(--stratos-neutral-white); /* neutral-600 (#949699) sat at ~4.67:1 — technically AA but weak for copy. * neutral-550 lifts muted text to ~6.4:1 on the dark surface. */ --color-on-surface-muted: var(--stratos-neutral-550); --color-on-surface-disabled: var(--stratos-neutral-650); --color-on-inverse: var(--stratos-neutral-900); --color-on-primary: var(--stratos-neutral-900); --color-on-secondary: var(--stratos-neutral-900); /* Surface sits one step above the page background (neutral-850 vs -900) so * header/sidebar/cards read as elevated instead of merging into the page. * surface-subtle (750) and surface-muted (900) extend that same ladder. */ --color-background: var(--stratos-neutral-900); --color-background-disabled: var(--stratos-neutral-900); --color-surface: var(--stratos-neutral-850); --color-surface-subtle: var(--stratos-neutral-750); --color-surface-muted: var(--stratos-neutral-900); --color-surface-inverse: var(--stratos-neutral-white); /* Dark-mode-appropriate swap for the fixed warm strip (round 12) — reuses the existing surface-subtle/input step rather than a glaring light warm patch. */ --color-surface-warm: var(--stratos-neutral-750); --color-border: var(--stratos-neutral-800); --color-border-hover: var(--stratos-neutral-650); --color-border-strong: var(--stratos-neutral-600); /* State: only the INK flips in dark. The fill and its on-color are PINNED — * deliberately NOT redeclared here, so the [data-brand] declaration above * still applies. Redeclaring them would silently reintroduce the theme flip * that made white-on-fill fail AA in dark (GOONIE-2551). */ --color-success-text: var(--stratos-success-400); --color-warning-text: var(--stratos-warning-400); --color-error-text: var(--stratos-error-300); --color-info-text: var(--stratos-info-400); /* Low-contrast tinted backdrops for status banners/badges in dark mode. */ --color-success-surface: var(--stratos-success-surface-400); --color-warning-surface: var(--stratos-warning-surface-400); --color-error-surface: var(--stratos-error-surface-400); --color-info-surface: var(--stratos-info-surface-400); } /* Chrome for the bundle-less Razor pages (/logged-out, /autherror). Tokens only — no brand hex (GOONIE-2531 AC). `@legalshield/stratos-tokens` has no `tokens.css` export — its own README's "CSS-only (no Tailwind)" recipe is base.css (primitives) + brands/.css (semantic tokens), same set globals.css imports for the React app. BOTH brand files are required: each one's tokens are scoped to `[data-brand='']`, not `:root` — there is no unscoped default. Without a `data-brand` attribute set on an ancestor element, no Stratos color token resolves at all (not even LegalShield's). Setting that attribute is the consuming Razor partial's job, not this stylesheet's. */ /* UA default `body { margin: 8px }` would otherwise survive: .bare-chrome is a
, so its own margin: 0 below doesn't touch the body's. Safe here only because this sheet never loads on React pages (_CorePageLayout.cshtml gates it behind !isReactApp). */ body { margin: 0; } .bare-chrome { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--color-background); color: var(--color-on-surface); font-family: var(--font-body, system-ui, sans-serif); } .bare-chrome__header { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border, var(--stratos-neutral-200)); background: var(--color-surface); } .bare-chrome__logo { height: 24px; width: auto; } .bare-chrome__main { flex: 1; display: flex; /* Own axis, not inherited from .bare-chrome: without this, every direct child (h1/h2/p, or text+link) lays out in a horizontal row. */ flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.5rem; text-align: center; } .bare-chrome__error { color: var(--color-error-text); } .bare-chrome__footer { padding: 1.5rem; border-top: 1px solid var(--color-border, var(--stratos-neutral-200)); background: var(--color-surface); text-align: center; font-size: 0.875rem; } .bare-chrome__links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 0.5rem; } .bare-chrome__links a { color: var(--color-primary); text-decoration: underline; } .bare-chrome__copyright { color: var(--color-on-surface-muted, inherit); }