/* iris/web/static/tokens.css * * Iris brand tokens. Light mode is the default; dark and dim modes * are engaged via [data-theme="dark"] or [data-theme="dim"] on * (set by mode-switcher.js based on prefers-color-scheme + * localStorage override). Dim is a softer mid-dark for users who find * pure dark too harsh. * * Color tokens are the single source of truth — no other CSS file * defines a hardcoded hex color. If you need a color that isn't here, * add a token first. * * The palette implements two parallel color systems: * 1. Coral (the brand) lives in chrome only — sidebar, nav, focus * rings, primary actions, system state, agent voice. Wherever you * see coral, Iris-the-product is speaking. * 2. Theme colors (the five corporate IT themes) live on the board * only — lane headers, task cells, On Deck section. Theme colors * never appear in chrome. * Coral and theme colors may share a screen but never share a UI * region. See IRIS_CONTEXT.md "Palette" section for full rationale. */ :root { /* ----- Surface (light mode default) ----- */ --color-bg: #fafafc; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: #e2e5eb; --color-border-strong: #cbd0d9; /* ----- Text (light) ----- */ --color-text: #1f2937; --color-text-secondary: #6b7280; --color-text-muted: #94a3b8; --color-text-inverse: #ffffff; /* ----- Brand coral (constant intent across modes; values per mode) ----- */ --color-brand-coral: #ea580c; --color-brand-coral-hover: #c2410c; --color-brand-coral-active: #9a3412; --color-brand-coral-on: #ffffff; /* ----- Theme palette (constant intent across modes; values per mode) ----- */ --theme-enable-one-tyler: #0891b2; /* cyan — corporate */ --theme-deliver-experience: #7c3aed; /* violet — corporate */ --theme-ai-data-driven: #db2777; /* magenta — corporate */ --theme-op-excellence: #d97706; /* amber — corporate */ --theme-tech-spend: #059669; /* emerald — corporate */ --theme-operations: #475569; /* slate — Operations theme (Ops Tasks, FPA Cycle): operational/utility */ --theme-special-projects: #db2777; /* rose — Special Projects theme: warm catch-all utility */ /* ----- Operational neutral (still useful as a fallback for any operational- * rhythm rendering edge case; kept after the theme rollup pivot in phase 1c * commit 2). Personal lane has no theme_id and renders without theme styling * — surface fill only — rather than reaching for this neutral. */ --color-operational-neutral: #94a3b8; /* ----- Personal lane accent (no theme_id) ----- * Personal-lane tasks render without a left accent or background tint — * they're genuinely outside the classification system. The lane *header* * still needs a recognizable colored band, though, so this token paints * the header bottom border + label color. Light mode uses slate-700 to * read as deliberately-deeper-than-Operations-slate (so "Personal is * neutral" doesn't read as "Personal is operational"); dark/dim use * an off-white tied to text-primary. */ --lane-personal-accent: #475569; /* ----- Backwards-compat aliases ----- * Direct uses of --color-brand-primary should migrate to * --color-brand-coral in component CSS over time. Defined in * :root only; the var() indirection picks up the mode-correct * value at consume time (custom-property substitution is dynamic). * --color-brand-secondary points at the cyan theme so chrome that * wants the brand pair (coral + cyan) stays in sync with the theme * token. Same value, two names, parallel concepts. */ --color-brand-primary: var(--color-brand-coral); --color-brand-primary-hover: var(--color-brand-coral-hover); --color-brand-primary-active: var(--color-brand-coral-active); --color-brand-primary-on: var(--color-brand-coral-on); --color-brand-secondary: var(--theme-enable-one-tyler); --color-brand-secondary-hover: var(--theme-enable-one-tyler); /* ----- Priority gauge (phase 1c commit 4) ----- * The mini-gauge SVG glyph in the bottom-right corner of task cards * encodes priority on its own visual axis, leaving theme color in * sole possession of the cell body. The fill colors are the priority * signal itself and stay constant across light/dark/dim — defining * them in :root only (no overrides in [data-theme] blocks) is * intentional. The track color follows the existing text-muted token, * which already varies by mode, so the unfilled portion of the arc * recedes appropriately in each theme. Low priority renders no gauge * at all, so no token is needed for it. */ --gauge-normal: #22d3ee; /* cyan */ --gauge-high: #f59e0b; /* amber */ --gauge-urgent: #dc2626; /* red */ --gauge-track: var(--color-text-muted); /* ----- Semantic ----- */ --color-due-far: transparent; --color-due-near: #0891b2; --color-due-imminent: #d97706; --color-due-overdue: #dc2626; --color-status-good: #059669; --color-status-warn: #d97706; --color-status-bad: #dc2626; --color-status-done: #94a3b8; /* ----- Date-anchor fill pairs (seven kinds matching AnchorKind) ----- * Each kind has bg/text tokens designed as a fill couple — bg from * the 50 stop of the kind's color ramp, text from the 800 stop. The * dark-mode block below inverts the pair (800 bg, 100/200 text); dim * reuses the dark variants. Values unchanged from the previous * palette — these were designed against named ramps independent of * brand palette. Used by .grid-anchor--* and .mobile-day__anchor--*. */ --anchor-pd-close-bg: #faeeda; --anchor-pd-close-text: #854f0b; --anchor-qtr-close-bg: #faece7; --anchor-qtr-close-text: #712b13; --anchor-ap-cutoff-bg: #e6f1fb; --anchor-ap-cutoff-text: #0c447c; --anchor-board-upload-bg: #eeedfe; --anchor-board-upload-text: #3c3489; --anchor-qbr-bg: #fbeaf0; --anchor-qbr-text: #72243e; --anchor-journal-cutoff-bg: #e1f5ee; --anchor-journal-cutoff-text: #085041; --anchor-holiday-bg: #f1efe8; --anchor-holiday-text: #444441; /* ----- Type ----- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ----- Font sizes ----- * * All in rem so a future font-size changer that adjusts 's * base font-size scales the entire UI proportionally. Component * styles MUST reference these tokens, not literal rem values. */ --font-size-2xs: 0.6875rem; /* 11px — scale extension below xs; * for dense/compact components (anchor * chips today; future status indicators, * badge counts, etc.). Reach for this * before inlining a smaller value. */ --font-size-xs: 0.75rem; /* 12px @ default 16px base */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.0625rem; /* 17px — slightly larger body */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 3rem; /* 48px — login wordmark */ --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-normal: 0; --tracking-wide: 0.02em; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; /* ----- Sizing ----- * Scale is multiplier × 4px base. --size-1 = 4px, --size-4 = 16px, * etc. --size-0-5 is the half-step (0.5 × 4 = 2px) for dense/compact * components (anchor chips today; future fine borders, dense layouts). * Reach for it before inlining a smaller value. */ --size-0-5: 0.125rem; /* 2px */ --size-1: 0.25rem; /* 4px */ --size-2: 0.5rem; /* 8px */ --size-3: 0.75rem; /* 12px */ --size-4: 1rem; /* 16px */ --size-5: 1.25rem; /* 20px */ --size-6: 1.5rem; /* 24px */ --size-8: 2rem; /* 32px */ --size-10: 2.5rem; /* 40px */ --size-12: 3rem; /* 48px */ --size-16: 4rem; /* 64px */ --size-24: 6rem; /* 96px */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 9999px; /* ----- OKR page (phase 2 commit 4 — page redesign) ----- * The OKR page renders Theme → Objective → KR as a stacked light layout * (Option A): each theme is a small theme-colored label above a 2px * theme-colored rule, with objectives stacked underneath. KRs render as * flat surface-card pills inside their objective's row. The chunky band * pattern from commits 2.3.x was replaced wholesale; the header design * itself was the wrong shape, not the spacing. * * --okr-rule-height: physical hairline (px stays px per the type-vs- * hairline rule in CSS docs). * --okr-drawer-width: edit drawer width. In rem so font-scaling resizes * the drawer with the rest of the UI; 26rem ≈ 416px at default base. * Wide enough for the long-form fields (description, notes, DoD) at * 2 rows without horizontal scroll, narrow enough to leave plenty of * page context behind it on a typical laptop screen. */ --okr-rule-height: 2px; --okr-drawer-width: 26rem; /* ----- Effects ----- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --focus-ring: 0 0 0 3px rgba(234, 88, 12, 0.4); --transition-fast: 120ms ease; --transition-base: 180ms ease; } /* Dark mode — applied when [data-theme="dark"] is set by mode-switcher.js. */ [data-theme="dark"] { /* Surface */ --color-bg: #141b2d; --color-surface: #1b2236; --color-surface-raised: #222a40; --color-border: #2a3349; --color-border-strong: #3a4360; /* Text */ --color-text: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #141b2d; /* Brand coral */ --color-brand-coral: #fb923c; --color-brand-coral-hover: #fdba74; --color-brand-coral-active: #fed7aa; --color-brand-coral-on: #1f2740; /* Theme palette */ --theme-enable-one-tyler: #22d3ee; --theme-deliver-experience: #8b5cf6; --theme-ai-data-driven: #ec4899; --theme-op-excellence: #f59e0b; --theme-tech-spend: #10b981; --theme-operations: #475569; /* slate — same hex across modes; reads on light + dark */ --theme-special-projects: #f472b6; /* rose-400 — brightens for dark legibility */ /* Operational neutral */ --color-operational-neutral: #64748b; /* Personal lane accent — off-white tied to text-primary in dark. */ --lane-personal-accent: #e2e8f0; --color-due-far: transparent; --color-due-near: #22d3ee; --color-due-imminent: #f59e0b; --color-due-overdue: #ef4444; --color-status-good: #10b981; --color-status-warn: #f59e0b; --color-status-bad: #ef4444; --color-status-done: #64748b; /* ----- Date-anchor fill pairs (dark variants) ----- * Inverted from light: 800-stop bg, 100/200-stop text. Values * unchanged from the previous palette. */ --anchor-pd-close-bg: #633806; --anchor-pd-close-text: #fac775; --anchor-qtr-close-bg: #4a1b0c; --anchor-qtr-close-text: #f5c4b3; --anchor-ap-cutoff-bg: #042c53; --anchor-ap-cutoff-text: #b5d4f4; --anchor-board-upload-bg: #26215c; --anchor-board-upload-text: #cecbf6; --anchor-qbr-bg: #4b1528; --anchor-qbr-text: #f4c0d1; --anchor-journal-cutoff-bg: #04342c; --anchor-journal-cutoff-text: #9fe1cb; --anchor-holiday-bg: #2c2c2a; --anchor-holiday-text: #d3d1c7; /* Effects */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(251, 146, 60, 0.4); } /* Dim mode — softer mid-dark, sits between light and dark. Dim reuses dark's accent values (brand coral, theme palette, semantic, anchor pairs); only the background/surface/border/text values lift, plus shadows soften. Mode switcher exposes this in phase 1c commit 5; until then the option is reachable manually via in DevTools. */ [data-theme="dim"] { /* Surface */ --color-bg: #1f2740; --color-surface: #272f46; --color-surface-raised: #2e3650; --color-border: #353d54; --color-border-strong: #454e6b; /* Text */ --color-text: #d1d8e5; --color-text-secondary: #8b96aa; --color-text-muted: #7e8aa0; --color-text-inverse: #1f2740; /* Brand coral (identical to dark) */ --color-brand-coral: #fb923c; --color-brand-coral-hover: #fdba74; --color-brand-coral-active: #fed7aa; --color-brand-coral-on: #1f2740; /* Theme palette (identical to dark) */ --theme-enable-one-tyler: #22d3ee; --theme-deliver-experience: #8b5cf6; --theme-ai-data-driven: #ec4899; --theme-op-excellence: #f59e0b; --theme-tech-spend: #10b981; --theme-operations: #475569; /* slate — identical to dark */ --theme-special-projects: #f472b6; /* rose-400 — identical to dark */ /* Operational neutral (slightly lifted from dark) */ --color-operational-neutral: #7e8aa0; /* Personal lane accent — matches dim's text-primary value. */ --lane-personal-accent: #d1d8e5; --color-due-far: transparent; --color-due-near: #22d3ee; --color-due-imminent: #f59e0b; --color-due-overdue: #ef4444; --color-status-good: #10b981; --color-status-warn: #f59e0b; --color-status-bad: #ef4444; --color-status-done: #7e8aa0; /* ----- Date-anchor fill pairs (dim reuses dark variants) ----- */ --anchor-pd-close-bg: #633806; --anchor-pd-close-text: #fac775; --anchor-qtr-close-bg: #4a1b0c; --anchor-qtr-close-text: #f5c4b3; --anchor-ap-cutoff-bg: #042c53; --anchor-ap-cutoff-text: #b5d4f4; --anchor-board-upload-bg: #26215c; --anchor-board-upload-text: #cecbf6; --anchor-qbr-bg: #4b1528; --anchor-qbr-text: #f4c0d1; --anchor-journal-cutoff-bg: #04342c; --anchor-journal-cutoff-text: #9fe1cb; --anchor-holiday-bg: #2c2c2a; --anchor-holiday-text: #d3d1c7; /* Effects (softened from dark per the dim direction) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(251, 146, 60, 0.4); } /* The HTML `hidden` attribute should always hide. The user-agent rule `[hidden] { display: none }` is specificity (0,1,0) and gets defeated the moment any author CSS sets `display: ...` on a class that any hidden element happens to carry (`.btn`, `.moments-editor`, etc.). Forcing `!important` here makes `hidden` mean what HTML says it means and removes a class of bugs where elements set hidden via JS (`el.hidden = true`) silently stay visible because of a class `display:` rule. If a component genuinely needs hidden-but-visible behavior it should use `aria-hidden` + a class, not the `hidden` attribute. Discovered while debugging the moments-editor save path in Phase 3 commit 2 — the form's own [hidden] was being defeated by `.moments-editor { display: flex }`, leaving the editor active before the operator clicked "+ New moment". */ [hidden] { display: none !important; } /* Sensible base styles using the tokens. */ html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: light dark; } [data-theme="dark"], [data-theme="dim"] { color-scheme: dark; } body { margin: 0; background: var(--color-bg); color: var(--color-text); transition: background-color var(--transition-base), color var(--transition-base); } a { color: var(--color-brand-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-brand-primary-hover); text-decoration: underline; } a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }