Julian Tabel
4fbfcf9b29
Replace incorrect perceived-brightness formula in Stats progress bars with proper WCAG relative luminance calculation, and convert type bar colors to hex values for reliable contrast detection. Add light: variant classes to status badges, yellow/purple text, and admin nav links across 17 files. Darken light-mode status-active token and text-tertiary/muted tokens. Add aria-labels to admin filter selects and flex-wrap for mobile overflow on AdminEvolutions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
131 lines
3.9 KiB
CSS
131 lines
3.9 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* ── Geist font family (variable, self-hosted) ─────────────────── */
|
|
|
|
@font-face {
|
|
font-family: 'Geist Sans';
|
|
src: url('/fonts/GeistSans-Variable.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Geist Mono';
|
|
src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Tailwind v4 theme tokens ──────────────────────────────────── */
|
|
|
|
@theme {
|
|
/* Typography */
|
|
--font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
|
|
|
|
/* Brand surfaces (dark-first) */
|
|
--color-surface-0: #0d1117;
|
|
--color-surface-1: #161b22;
|
|
--color-surface-2: #1c2128;
|
|
--color-surface-3: #21262d;
|
|
--color-surface-4: #282e36;
|
|
|
|
/* Brand accent (steel blue from logo) */
|
|
--color-accent-50: #e8f4fa;
|
|
--color-accent-100: #c5e3f2;
|
|
--color-accent-200: #9dcde6;
|
|
--color-accent-300: #7eb0ce;
|
|
--color-accent-400: #5c95b8;
|
|
--color-accent-500: #4a7d9e;
|
|
--color-accent-600: #395e73;
|
|
--color-accent-700: #2d4a5c;
|
|
--color-accent-800: #1f3340;
|
|
--color-accent-900: #142129;
|
|
|
|
/* Text on dark */
|
|
--color-text-primary: #e6edf3;
|
|
--color-text-secondary: #9198a1;
|
|
--color-text-tertiary: #8b949e;
|
|
--color-text-muted: #8b949e;
|
|
--color-text-link: #7eb0ce;
|
|
|
|
/* Borders */
|
|
--color-border-default: rgba(255, 255, 255, 0.08);
|
|
--color-border-muted: rgba(255, 255, 255, 0.04);
|
|
--color-border-accent: rgba(126, 176, 206, 0.3);
|
|
|
|
/* Status (tuned for dark surfaces) */
|
|
--color-status-alive: #2ea043;
|
|
--color-status-alive-bg: rgba(46, 160, 67, 0.15);
|
|
--color-status-dead: #da3633;
|
|
--color-status-dead-bg: rgba(218, 54, 51, 0.15);
|
|
--color-status-active: #3fb950;
|
|
--color-status-active-bg: rgba(63, 185, 80, 0.15);
|
|
--color-status-completed: #58a6ff;
|
|
--color-status-completed-bg: rgba(88, 166, 255, 0.15);
|
|
--color-status-failed: #f85149;
|
|
--color-status-failed-bg: rgba(248, 81, 73, 0.15);
|
|
}
|
|
|
|
@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
|
|
|
|
/* ── Light mode overrides ─────────────────────────────────────── */
|
|
|
|
html[data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
/* Surfaces */
|
|
--color-surface-0: #ffffff;
|
|
--color-surface-1: #f6f8fa;
|
|
--color-surface-2: #eef1f4;
|
|
--color-surface-3: #d8dee4;
|
|
--color-surface-4: #ced5dc;
|
|
|
|
/* Accent (darkened for text contrast on light surfaces) */
|
|
--color-accent-200: #245f7e;
|
|
--color-accent-300: #1a5068;
|
|
--color-accent-400: #2d6a89;
|
|
|
|
/* Text */
|
|
--color-text-primary: #1f2328;
|
|
--color-text-secondary: #656d76;
|
|
--color-text-tertiary: #596069;
|
|
--color-text-muted: #596069;
|
|
--color-text-link: #1a5068;
|
|
|
|
/* Borders */
|
|
--color-border-default: rgba(0, 0, 0, 0.15);
|
|
--color-border-muted: rgba(0, 0, 0, 0.08);
|
|
--color-border-accent: rgba(57, 94, 115, 0.35);
|
|
|
|
/* Status (adjusted for light surfaces) */
|
|
--color-status-alive: #1a7f37;
|
|
--color-status-alive-bg: rgba(26, 127, 55, 0.1);
|
|
--color-status-dead: #cf222e;
|
|
--color-status-dead-bg: rgba(207, 34, 46, 0.1);
|
|
--color-status-active: #116b2b;
|
|
--color-status-active-bg: rgba(17, 107, 43, 0.08);
|
|
--color-status-completed: #0969da;
|
|
--color-status-completed-bg: rgba(9, 105, 218, 0.1);
|
|
--color-status-failed: #cf222e;
|
|
--color-status-failed-bg: rgba(207, 34, 46, 0.1);
|
|
}
|
|
|
|
/* ── Base layer ────────────────────────────────────────────────── */
|
|
|
|
@layer base {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-0 text-text-primary font-sans antialiased;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-accent-600/50 text-white;
|
|
}
|
|
}
|