/** * IrriVue Design Tokens — v0.1 (CSS custom properties) * ─────────────────────────────────────────────────────────────────────────── * Use this instead of tokens.ts if the estimator is web-only (Next.js, * Tailwind, plain CSS). Same values, same names, same rules. * * THEMING * Day is the default. Night applies via [data-theme="night"] on , * and via prefers-color-scheme for users who have not chosen. * * RULE * Components reference ROLE variables (--card-background, --body-color), * never palette variables and never raw hex. * * See ../01-design-system.md for the reasoning behind each group. */ :root { /* ── Palette: primary ─────────────────────────────────────────────── */ --app-true-black: #000000; --app-black: #141414; --app-blue: #299ad3; --app-graphite: #3a3a3a; --app-platinum: #f3f5f7; --app-white: #ffffff; /* ── Palette: secondary ───────────────────────────────────────────── */ --app-green: #40c63c; --app-gold: #efce0f; --app-red: #f21717; --app-purple: #b150ea; /* ── Palette: blue family ─────────────────────────────────────────── */ --app-blue-darker: #195c7f; --app-blue-dark: #217ba9; --app-blue-light: #54aedc; --app-blue-lighter: #7fc2e5; /* ── Palette: graphite family ─────────────────────────────────────── */ --app-graphite-darker: #232323; --app-graphite-dark-plus: #2c2c2c; --app-graphite-dark: #343434; --app-graphite-mid: #4a4a4a; --app-graphite-border: #6b6b6b; --app-graphite-light: #b0b0b0; --app-graphite-lighter: #d8d8d8; --app-border: #e0e2e4; /* ── Palette: green family ────────────────────────────────────────── */ --app-green-darker: #288026; --app-green-dark: #32a02f; --app-green-light: #66d163; --app-green-lighter: #85da82; /* ── Palette: gold family ─────────────────────────────────────────── */ --app-gold-darker: #bfa50c; /* The only gold that can be READ: 4.92:1 on white. appGold is 1.55:1. */ --app-gold-deep: #8a6d00; --app-gold-dark: #d2c055; --app-gold-light: #f2d83f; --app-gold-lighter: #f6e479; /* ── Palette: red family ──────────────────────────────────────────── */ --app-red-darker: #a10909; --app-red-dark: #c90b0b; --app-red-light: #f54545; --app-red-lighter: #f76a6a; /* ── Palette: purple family ───────────────────────────────────────── */ --app-purple-darker: #7916b3; --app-purple-dark: #971be0; --app-purple-light: #c173ee; --app-purple-lighter: #cd8ff1; /* ── Status fills — carry WHITE text. Identical in both themes. ───── */ /* White on a color depends only on that color's lightness; the surface behind the chip is irrelevant, so there is nothing to vary. */ --success-fill: var(--app-green-darker); --warning-fill: var(--app-gold-deep); --error-fill: var(--app-red-darker); --info-fill: var(--app-blue-dark); /* ── Domain colors — rename for the estimator, keep the practice. ─── */ --status-passed: var(--app-green); --status-overdue: var(--app-gold); --status-failed: var(--app-red); --status-unchecked: var(--app-blue); /* blue, not grey — grey vanished on map imagery */ --action-edit: var(--app-blue); --action-chat: var(--app-purple); --action-info: var(--app-blue-lighter); --action-delete: var(--app-red-dark); /* ── Typography scale ─────────────────────────────────────────────── */ --font-size-banner: 24px; --font-size-heading: 18px; --font-size-default: 16px; --font-size-secondary: 14px; --font-size-subtext: 12px; --font-size-subscript: 10px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Radius / padding / gap — web tiers ───────────────────────────── */ /* Parent = cards, sections, modals. Child = nested inside a parent. Nested = two levels deep. Mobile compresses to 10 / 5. */ --radius-parent: 20px; --radius-child: 10px; --radius-nested: 5px; --padding-parent: 20px; --padding-child: 10px; --gap: 20px; /* ── Buttons ──────────────────────────────────────────────────────── */ --button-padding-x: 15px; /* both platforms, regardless of tier */ --button-height: 42px; --button-font-size: var(--font-size-secondary); --button-vertical-height: 52px; } /* ═══ DAY (default) ═════════════════════════════════════════════════════ */ :root, :root[data-theme="day"] { color-scheme: light; /* Typography roles */ --h1-color: var(--app-black); --h2-color: var(--app-black); --h3-color: var(--app-graphite); --h4-color: var(--app-graphite); --h5-color: var(--app-graphite); --h6-color: var(--app-graphite); --body-color: var(--app-graphite); --label-color: var(--app-graphite); --input-color: var(--app-graphite); /* Same as body on purpose: appGraphiteLight on appPlatinum is ~2.4:1, below WCAG AA. On Day, "muted" comes from size and weight. */ --muted-text-color: var(--app-graphite); --link-color: var(--app-blue); --link-hover-color: var(--app-blue-lighter); /* Surfaces */ --page-background: var(--app-platinum); --surface-background: var(--app-white); --card-background: var(--app-white); --menu-background: var(--app-graphite-lighter); --elevated-surface: var(--app-white); --border-color: var(--app-graphite-lighter); --divider-color: rgba(20, 20, 20, 0.25); --sidebar-background: var(--app-graphite-dark-plus); /* Status as TEXT on a surface — theme-aware, unlike the fills. */ --success-text: var(--app-green-darker); --warning-text: var(--app-gold-deep); --error-text: var(--app-red-darker); --info-text: var(--app-blue-dark); /* Flat semantic — safe as fills, borders, dots, icons. */ --success: var(--app-green-darker); --warning: var(--app-gold-deep); --error: var(--app-red-darker); --info: var(--app-blue-dark); /* Links: blue at rest, blue on interaction. */ --link-default: var(--app-blue); --link-active: var(--app-blue); --link-disabled: var(--app-graphite-light); } /* ═══ NIGHT ═════════════════════════════════════════════════════════════ */ :root[data-theme="night"] { color-scheme: dark; --h1-color: var(--app-platinum); --h2-color: var(--app-platinum); --h3-color: var(--app-graphite-lighter); --h4-color: var(--app-graphite-lighter); --h5-color: var(--app-graphite-lighter); --h6-color: var(--app-graphite-lighter); --body-color: var(--app-graphite-lighter); --label-color: var(--app-graphite-light); --input-color: var(--app-platinum); --muted-text-color: var(--app-graphite-light); --link-color: var(--app-blue); --link-hover-color: var(--app-blue-lighter); --page-background: var(--app-graphite-darker); --surface-background: var(--app-black); --card-background: var(--app-graphite); --menu-background: var(--app-graphite); --elevated-surface: var(--app-graphite-mid); /* appGraphiteDark was DARKER than the card it outlined — 1.09:1, so borders were effectively invisible. This measures 2.13:1. */ --border-color: var(--app-graphite-border); --divider-color: rgba(255, 255, 255, 0.25); --sidebar-background: var(--app-graphite-dark-plus); /* Colored TEXT keeps the bright end on Night — a label has to contrast with the dark card behind it. This is the one place the modes differ. */ --success-text: var(--app-green-light); --warning-text: var(--app-gold-light); --error-text: var(--app-red-light); --info-text: var(--app-blue-light); /* SAME dark values as Day — the bright variants read as garish, and one value per role removes a class of "right in Day, wrong in Night" bugs. As TEXT on a Night card these are weak, so a label on a dark surface uses the *-fill token with white text, or falls back to --body-color. */ --success: var(--app-green-darker); --warning: var(--app-gold-deep); --error: var(--app-red-darker); --info: var(--app-blue-dark); /* Links: white at rest, brand blue on interaction — inverted from Day because blue-on-dark at rest gets lost inside a paragraph. */ --link-default: var(--app-white); --link-active: var(--app-blue); --link-disabled: var(--app-graphite-light); } /* Users who have not chosen explicitly follow the OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { color-scheme: dark; --h1-color: var(--app-platinum); --h2-color: var(--app-platinum); --h3-color: var(--app-graphite-lighter); --h4-color: var(--app-graphite-lighter); --h5-color: var(--app-graphite-lighter); --h6-color: var(--app-graphite-lighter); --body-color: var(--app-graphite-lighter); --label-color: var(--app-graphite-light); --input-color: var(--app-platinum); --muted-text-color: var(--app-graphite-light); --page-background: var(--app-graphite-darker); --surface-background: var(--app-black); --card-background: var(--app-graphite); --menu-background: var(--app-graphite); --elevated-surface: var(--app-graphite-mid); --border-color: var(--app-graphite-border); --divider-color: rgba(255, 255, 255, 0.25); --success-text: var(--app-green-light); --warning-text: var(--app-gold-light); --error-text: var(--app-red-light); --info-text: var(--app-blue-light); --link-default: var(--app-white); --link-active: var(--app-blue); } } /* ═══ Mobile tiers ══════════════════════════════════════════════════════ */ /* Mobile compresses to two radius tiers and halves padding and gap. */ @media (max-width: 768px) { :root { --radius-parent: 10px; --radius-child: 5px; --radius-nested: 5px; --padding-parent: 10px; --padding-child: 5px; --gap: 10px; } } /* ═══ Base semantic type ════════════════════════════════════════════════ */ /* Optional starting point. Visual hierarchy is intentional only down to h2 — h3-h6 are identical by design and exist for document structure. */ body { background: var(--page-background); color: var(--body-color); font-size: var(--font-size-default); font-weight: var(--font-weight-regular); } h1 { font-size: var(--font-size-banner); font-weight: var(--font-weight-semibold); color: var(--h1-color); } h2 { font-size: var(--font-size-heading); font-weight: var(--font-weight-semibold); color: var(--h2-color); } h3, h4, h5, h6 { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--h3-color); } p, ul, ol { font-size: var(--font-size-default); color: var(--body-color); } /* Uppercase is part of the label spec. Every label on a screen matches this, including any written by hand. */ label { font-size: var(--font-size-secondary); text-transform: uppercase; color: var(--label-color); margin-bottom: 6px; line-height: 20px; display: block; } input, textarea { font-size: var(--font-size-default); color: var(--input-color); } a { color: var(--link-default); } a:hover, a:active { color: var(--link-active); } a[aria-disabled="true"] { color: var(--link-disabled); }