/* * coson/portal default theme — the complete semantic-token set every * package (coson-ui, coson-components, and any future feature package) * consumes instead of hardcoding brand colours (brief §12, layer 1+2). * * A host overrides individual tokens after this file loads (layer 3); the * default values below make the shell fully usable with zero host theming. * Load order across the whole stack (brief §14): components base -> this * file -> feature-package styles -> host theme -> page-specific styles. * * Default values implement a NEUTRAL SLATE system on purpose: this repository * ships no company's brand, so an install that configures nothing looks * unbranded rather than looking like somebody else. Cool slate neutrals, 12px * card radius, cool-blue-tinted shadows, Manrope type. The blue tokens below * are opt-in accents, not the default chrome. * * CONTRACT: every --portal-color-* value is a space-separated RGB triplet — * consumers do rgb(var(--portal-color-primary)) and * rgb(var(--portal-color-border) / 0.5). Never change a colour token to any * other format, and never remove or rename a token (fleet-wide break). * * FONTS: the design system's face is Manrope (UI/headings) with IBM Plex * Mono for code. This package deliberately never imports Google Fonts — * package CSS must not force a network fetch. The stacks below fall back to * system fonts; a host wanting the true Manrope/Plex Mono look should * self-host the fonts (or add its own ) so the family names resolve. */ :root { /* Primary action colour — drives primary buttons, active nav, focus. * DEFAULT is the design system's "Neutral Theme": a dark slate (#25394F), * NOT the brand blue. The Neutral Theme keeps chrome monochrome and * reserves brand colour for opt-in accents (see --portal-color-brand). * A host recolours every action by overriding this one token. */ --portal-color-primary: 37 57 79; --portal-color-primary-contrast: 255 255 255; /* * Brand accent — the one colour the shell paints on top of its slate chrome: * dashboard stat chips, the overview panel, onboarding icons and links. * * Slate by default, and the SAME slate as --portal-color-primary. It used to be a * blue (#1466B4) left over from a real company's wordmark, so a repository that * ships a deliberately unbranded placeholder still had one blue surface — the * dashboard — announcing a brand nobody had configured. A host that wants an accent * overrides this one token through branding.theme_tokens. */ --portal-color-brand: 60 81 103; /* Cool slate neutral scale (design system), for shell chrome — surfaces, * avatars, dot markers, muted pills. Triplet contract as all colours. */ --portal-color-slate-100: 233 239 245; /* #E9EFF5 */ --portal-color-slate-300: 174 190 204; /* #AEBECC */ /* Darkened from #8498AC (2.97:1 on white) to clear 4.5:1 as literal text — * see docs/PLAN-REVIEW-FIXES.md Batch A. Same hue, +0.7deg, deliberately * landing close to text-muted below; the two are near-duplicates after * this and are a later merge candidate, not part of this batch. */ --portal-color-slate-400: 97 118 138; /* #61768A, 4.70:1 on white */ /* slate-600 is the design system's text colour for chips sitting on a * slate-100 fill: 5.7:1 there, where slate-400 is only 2.9:1. */ --portal-color-slate-600: 72 95 118; /* #485F76 */ --portal-color-slate-700: 60 81 103; /* #3C5167 */ --portal-color-slate-800: 37 57 79; /* #25394F */ /* Surfaces — white cards on a cool off-white page (#F4F8FB) */ --portal-color-surface: 255 255 255; --portal-color-surface-muted: 244 248 251; /* Decorative hairline ONLY — card outlines, row dividers, topbar rule. * 1.22:1 on white, nowhere near the 3:1 non-text minimum, and that is fine * for a divider that isn't the sole way a boundary is perceived. Do NOT * put this on a resting form-control border (an input relies on its * border alone to read as a box) — use --portal-color-border-strong for * that, which is darkened specifically to clear 3:1. */ --portal-color-border: 226 234 241; /* #E2EAF1 hairline */ /* Text — ink navy (#15263B) and slate-500 (#5E7993) */ --portal-color-text: 21 38 59; /* Darkened from #5E7993 (4.55:1 on white, but only 4.25:1 on * --portal-color-surface-muted, where this token is also used as text) to * clear 4.5:1 on the muted background specifically — see * docs/PLAN-REVIEW-FIXES.md Batch A and ContrastTokensTest. */ --portal-color-text-muted: 90 116 144; /* #5A7490, 4.84:1 on white, 4.54:1 on surface-muted */ /* Semantic */ /* * #178552 — darkened from #1E9E6A. The old value was 3.41:1 on white: * fine as a tint or a status dot, under AA as literal text, which is what * the contract status pill uses it for (12.5px bold on a 12%-alpha fill of * itself) along with the forgot-password confirmation and Catalogue's * archive notices. Same hue (~153°) and saturation, lightness reduced. * WCAG contrast on white is now 4.66:1. See ContrastTokensTest. */ --portal-color-success: 23 133 82; /* * #9D6812 — darkened from #E0941A. The old value was 2.49:1 on white, * failing even the 3:1 large-text/non-text floor it needs as Catalogue's * Archive/Delete button text (catalogue-manager.blade.php's --warning) and * as small badge text (the changelog's "INTERNAL" tag, portal.css's * .cp-release-internal) — so it had to clear full body-text contrast, not * just 3:1. Same hue (~37°) and saturation as before, only lightness * reduced. WCAG contrast on white is now 4.75:1. See ContrastTokensTest. */ --portal-color-warning: 157 104 18; /* * #CD4238 — darkened from #D8453B. The old value was 4.34:1 on white, * just under the 4.5:1 body-text minimum, and it styles essentially every * validation error message in the application. Same hue, scaled ~5% * darker. WCAG contrast on white is now 4.74:1. See ContrastTokensTest. */ --portal-color-danger: 205 66 56; /* #CD4238 */ /* * The reading measure of a single-column page — every screen that is a form or a * short list rather than a wide table. * * These had each picked their own: 42rem on the profile, 40rem on the DMARC checker, * 38rem on feedback, 34rem on two-factor, 400px inline on the password change, and * 47.5rem across settings. Moving between them made the column jump every time. * * --portal-settings-width below is kept as an alias rather than renamed: token names * are a published contract, and nothing is gained by breaking one an hour after * shipping it. * * 78rem, matching .cp-scroll-inner — the measure every LIST page already fills. It was * briefly 47.5rem, which made every settings and form screen narrower than the pages * either side of it, so the content column jumped on navigation in the other direction * (Matt, 2026-07-30). Equal to the shell's own cap means these pages simply stop * constraining themselves further, rather than picking a second number. */ --portal-page-width: 78rem; /* * The reading width of a settings screen. An alias of --portal-page-width. * * One token because the settings screens each picked their own: 760px on the two * Quote screens, 640px inline on Message settings, and full width on the * notification screens — so moving between them made the content column jump, and * the tables inside them were three different widths. Anything laying out a * settings screen reads this rather than a literal. * * 47.5rem (760px) is the value the busiest of those screens already used, and it * comfortably fits the widest table any of them renders (event + two channels). */ --portal-settings-width: var(--portal-page-width); /* Radii — 12px default card/input radius per the design system */ --portal-radius-sm: 0.5rem; --portal-radius-md: 0.75rem; --portal-radius-lg: 1rem; /* Elevation — cool-blue-tinted (design shadow-xs) */ --portal-shadow-card: 0 1px 2px rgb(21 38 59 / 0.06); --portal-font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* ------------------------------------------------------------------ * Additive tokens — introduced after the original * brief; same triplet contract for colour tokens. * ------------------------------------------------------------------ */ /* Deep gradient endpoints + azure accent from the wordmark */ --portal-color-indigo: 36 60 142; /* #243C8E */ --portal-color-azure: 14 134 204; /* #0E86CC */ --portal-color-info: 14 134 204; /* Ink — near-black navy for dark brand panels (e.g. sign-in split) */ --portal-color-ink: 21 38 59; /* #15263B */ /* * #6C8EAD — darkened from #CBD7E2. The old value was 1.46:1 on white, * far under the 3:1 WCAG 2.2 non-text minimum for a resting form-control * border (.cp-input, .cc-btn-secondary, .cp-toggle all use this token as * their sole visual boundary — no other cue marks the edge of the box). * Same hue (~209°) and saturation as before, only lightness reduced. * WCAG contrast on white is now 3.44:1. See ContrastTokensTest. */ --portal-color-border-strong: 108 142 173; /* #6C8EAD input borders */ /* Signature wordmark gradient (left -> right). Kept for opt-in brand * flourishes; the Neutral Theme does NOT paint it on buttons by default. */ --portal-gradient-brand: linear-gradient(100deg, #243C8E 0%, #1466B4 46%, #0E86CC 100%); /* Gradient painted over primary-coloured actions (buttons). DEFAULT none, * so primary buttons are a solid --portal-color-primary (Neutral Theme * slate). A host opts into a gradient look by setting this to, e.g., * var(--portal-gradient-brand). */ --portal-gradient-primary: none; --portal-radius-pill: 999px; --portal-shadow-md: 0 8px 24px rgb(21 38 59 / 0.09); --portal-shadow-brand: 0 14px 34px rgb(60 81 103 / 0.30); --portal-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* Eyebrow labels — the brand's spaced uppercase "IT SERVICES" lockup */ --portal-letterspacing-eyebrow: 0.14em; }