pyr0ball
5d8018ef40
peregrine.css used :root:not([data-theme="hacker"]) in the prefers-color-scheme:dark block, causing --app-primary-light and --app-accent-light to resolve to dark navy/brown in every explicit light theme (light, solarized-light, colorblind) on dark-OS machines. Changed to :root:not([data-theme]) to match theme.css's pattern, so the media query only fires in auto mode. Explicit [data-theme="dark"] block handles the dark-theme-on-light-OS case unchanged. Also fixed incorrect fallback values in HintChip.vue (#0d1829 → #eaeff8) and App.vue global toast (#2a3650/#eaeff8 → light-mode values). Closes: dark elements in light themes on dark-OS machines
137 lines
5.2 KiB
CSS
137 lines
5.2 KiB
CSS
/* web/src/assets/peregrine.css
|
||
Peregrine-specific token overrides — imported AFTER theme.css.
|
||
Source of truth: circuitforge-plans/peregrine/2026-03-03-nuxt-design-system.md
|
||
|
||
Brand:
|
||
Falcon Blue (#2B6CB0) — slate-blue back plumage of the peregrine falcon
|
||
Talon Orange (#E06820) — vivid orange-yellow talons and cere
|
||
*/
|
||
|
||
/* ── Page-level ─────────────────────────────────────── */
|
||
html {
|
||
overscroll-behavior-x: none;
|
||
overflow-x: clip; /* clip (not hidden) — no BFC scroll-container side effect. Gotcha #3. */
|
||
}
|
||
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── Light mode (default) ──────────────────────────── */
|
||
:root {
|
||
/* ── Peregrine brand colors ── */
|
||
--app-primary: #2B6CB0; /* Falcon Blue — 4.70:1 on #eaeff8 ✅ AA */
|
||
--app-primary-hover: #245A9E;
|
||
--app-primary-light: #EBF4FF; /* subtle tint — background use only */
|
||
|
||
--app-accent: #E06820; /* Talon Orange — use dark text on top */
|
||
--app-accent-hover: #C05415;
|
||
--app-accent-light: #FFF3EB; /* subtle tint — background use only */
|
||
--app-accent-text: #1a2338; /* on-button text — dark navy, NEVER white (only 2.8:1) */
|
||
|
||
/* ── CSS variable aliases (component names → theme.css canonical names. Gotcha #5.) ── */
|
||
--color-bg: var(--color-surface);
|
||
--color-text-secondary: var(--color-text-muted);
|
||
|
||
/* ── Layout ── */
|
||
--nav-height: 4rem; /* top bar height (mobile) */
|
||
--sidebar-width: 220px; /* persistent sidebar (≥1024px) */
|
||
|
||
/* ── Pipeline status colors ── */
|
||
/* Always pair with text label or icon — never color alone (accessibility) */
|
||
--status-pending: var(--color-warning);
|
||
--status-approve: var(--color-success);
|
||
--status-reject: var(--color-error);
|
||
--status-applied: var(--color-info);
|
||
--status-synced: #5b4fa8;
|
||
--status-archived: var(--color-text-muted);
|
||
--status-survey: #6d3fa8;
|
||
--status-phone: #1a7a6e;
|
||
--status-interview: var(--color-info);
|
||
--status-offer: #b8620a;
|
||
--status-hired: var(--color-success);
|
||
|
||
/* ── Match score thresholds ── */
|
||
--score-high: var(--color-success); /* ≥ 70% */
|
||
--score-mid-high: #2b7cb8; /* 50–69% — Falcon Blue variant */
|
||
--score-mid: var(--color-warning); /* 30–49% */
|
||
--score-low: var(--color-error); /* < 30% */
|
||
--score-none: var(--color-text-muted);
|
||
|
||
/* ── Motion tokens ── */
|
||
--swipe-exit: 300ms;
|
||
--swipe-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--confetti-dur: 3500ms;
|
||
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--transition-dismiss: 350ms ease-in;
|
||
--transition-enter: 250ms ease-out;
|
||
|
||
/* ── Type scale ── */
|
||
--text-xs: 0.75rem; /* 12px — badge labels, timestamps, keyboard hints */
|
||
--text-sm: 0.875rem; /* 14px — card secondary, captions */
|
||
--text-base: 1rem; /* 16px — body, card descriptions */
|
||
--text-lg: 1.125rem; /* 18px — card title, section headers */
|
||
--text-xl: 1.25rem; /* 20px — page section headings */
|
||
--text-2xl: 1.5rem; /* 24px — page titles */
|
||
--text-3xl: 1.875rem; /* 30px — dashboard greeting */
|
||
}
|
||
|
||
/* ── Dark mode ─────────────────────────────────────── */
|
||
/* Covers both: OS-level dark preference AND explicit dark theme selection in UI */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme]) {
|
||
--app-primary: #68A8D8; /* Falcon Blue (dark) — 6.54:1 on #16202e ✅ AA */
|
||
--app-primary-hover: #7BBDE6;
|
||
--app-primary-light: #0D1F35;
|
||
|
||
--app-accent: #F6872A; /* Talon Orange (dark) — 5.22:1 on #16202e ✅ AA */
|
||
--app-accent-hover: #FF9840;
|
||
--app-accent-light: #2D1505;
|
||
--app-accent-text: #1a2338;
|
||
|
||
--score-mid-high: #5ba3d9; /* lighter blue for dark bg */
|
||
|
||
--status-synced: #9b8fea;
|
||
--status-survey: #b08fea;
|
||
--status-phone: #4ec9be;
|
||
--status-offer: #f5a43a;
|
||
}
|
||
}
|
||
|
||
/* Explicit [data-theme="dark"] — fires when user picks dark via theme picker
|
||
on a light-OS machine (where prefers-color-scheme: dark won't match) */
|
||
[data-theme="dark"]:not([data-theme="hacker"]) {
|
||
--app-primary: #68A8D8;
|
||
--app-primary-hover: #7BBDE6;
|
||
--app-primary-light: #0D1F35;
|
||
|
||
--app-accent: #F6872A;
|
||
--app-accent-hover: #FF9840;
|
||
--app-accent-light: #2D1505;
|
||
--app-accent-text: #1a2338;
|
||
|
||
--score-mid-high: #5ba3d9;
|
||
|
||
--status-synced: #9b8fea;
|
||
--status-survey: #b08fea;
|
||
--status-phone: #4ec9be;
|
||
--status-offer: #f5a43a;
|
||
}
|
||
|
||
/* ── Hacker mode (Konami easter egg) ──────────────── */
|
||
[data-theme="hacker"] {
|
||
--app-primary: #00ff41;
|
||
--app-primary-hover: #00cc33;
|
||
--app-primary-light: #001a00;
|
||
--app-accent: #00ff41;
|
||
--app-accent-hover: #00cc33;
|
||
--app-accent-light: #001a00;
|
||
--app-accent-text: #0a0c0a;
|
||
}
|
||
|
||
/* ── Focus style — keyboard nav (accessibility requirement) ── */
|
||
:focus-visible {
|
||
outline: 2px solid var(--app-primary);
|
||
outline-offset: 3px;
|
||
border-radius: var(--radius-sm);
|
||
}
|