/* * StableFlo daisyUI theme — "Signal Lime". * * daisyUI 5 themes are plain CSS variables — this file IS the theme, no build * step involved. Loaded after the compiled tailwind.css, activated by * . Change brand colors here and nowhere else. * Colors are oklch(lightness chroma hue); the trailing hex note on each is the * brand source value it was converted from. * * Palette: Signal Lime #d8f100 · Ink #0c0c0c · Paper #ffffff–#eceae5 * Rules: Paper carries the interface, Ink carries the words, one lime * action per view. Status colors stay muted — never lime. * Shape: 10px controls, 16px containers, pill selectors. Flat — no depth. */ /* Brand typeface — self-hosted variable woff2 (wght 200–800), no runtime CDN. * propshaft fingerprints the url() at serve time. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/PlusJakartaSans-latin-wght-normal-d2ff26bc.woff2") format("woff2-variations"); } [data-theme='stableflo'] { color-scheme: light; /* Paper surfaces */ --color-base-100: oklch(100% 0 0); /* #ffffff — cards, page */ --color-base-200: oklch(97% 0.003 85); /* #f6f5f3 — app background */ --color-base-300: oklch(93.7% 0.007 89); /* #eceae5 — wells, borders, hover */ --color-base-content: oklch(15.4% 0 0); /* #0c0c0c — ink, body text */ /* Signal Lime — the one action per view */ --color-primary: oklch(90.8% 0.21 117); /* #d8f100 */ --color-primary-content: oklch(15.4% 0 0); /* #0c0c0c — lime always carries ink */ /* Ink — solid dark buttons/badges */ --color-secondary: oklch(15.4% 0 0); /* #0c0c0c */ --color-secondary-content: oklch(97% 0.003 85); /* #f6f5f3 */ /* Deep lime — link hover / active tint */ --color-accent: oklch(47.8% 0.11 116); /* #5a6400 */ --color-accent-content: oklch(97% 0.003 85); /* #f6f5f3 */ --color-neutral: oklch(38.2% 0.007 95); /* #44433f — navbar, footers */ --color-neutral-content: oklch(97% 0.003 85); /* #f6f5f3 */ /* Feedback — functional and muted, never lime */ --color-info: oklch(51.6% 0.04 227); /* #4f6d7a */ --color-info-content: oklch(100% 0 0); /* #ffffff */ --color-success: oklch(53.2% 0.096 151); /* #3e7c4f */ --color-success-content: oklch(100% 0 0); /* #ffffff */ --color-warning: oklch(63.2% 0.128 78); /* #b47e10 */ --color-warning-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-error: oklch(48.3% 0.147 24); /* #a13232 */ --color-error-content: oklch(100% 0 0); /* #ffffff */ /* Shape: 10px controls, 16px containers, pill selectors — flat */ --radius-selector: 2rem; /* badges, toggles, checkboxes */ --radius-field: 0.625rem; /* 10px — inputs, selects, buttons */ --radius-box: 1rem; /* 16px — cards, modals, tables */ --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } /* Categorical chart palette — 5 fixed-order slots, validated with the dataviz * six-checks script against the light (white card) surface. Charts reference * these via .chart-color-N + currentColor (inline style attrs are CSP-blocked). */ [data-theme='stableflo'] { --chart-1: #4f46e5; --chart-2: #0891b2; --chart-3: #15803d; --chart-4: #b45309; --chart-5: #a21caf; } .chart-color-1 { color: var(--chart-1); } .chart-color-2 { color: var(--chart-2); } .chart-color-3 { color: var(--chart-3); } .chart-color-4 { color: var(--chart-4); } .chart-color-5 { color: var(--chart-5); } /* Dark variant — Ink surfaces, follows the OS preference automatically. Lime is * built for dark and stays put; Paper flips in as the secondary. A manual toggle * can layer on later without touching this. */ @media (prefers-color-scheme: dark) { [data-theme='stableflo'] { color-scheme: dark; --color-base-100: oklch(15.4% 0 0); /* #0c0c0c */ --color-base-200: oklch(20.4% 0.002 107); /* #171716 */ --color-base-300: oklch(28.4% 0.004 107); /* #2a2a28 */ --color-base-content: oklch(97% 0.003 85); /* #f6f5f3 */ --color-primary: oklch(90.8% 0.21 117); /* #d8f100 */ --color-primary-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-secondary: oklch(97% 0.003 85); /* #f6f5f3 — paper flips in */ --color-secondary-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-accent: oklch(94% 0.169 115); /* #e8f866 — lime-300 for dark */ --color-accent-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-neutral: oklch(38.2% 0.007 95); /* #44433f */ --color-neutral-content: oklch(97% 0.003 85); /* #f6f5f3 */ --color-info: oklch(69.4% 0.049 229); /* #7da3b5 */ --color-info-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-success: oklch(69.3% 0.098 153); /* #6bae7f */ --color-success-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-warning: oklch(75.4% 0.133 82); /* #d9a63c */ --color-warning-content: oklch(15.4% 0 0); /* #0c0c0c */ --color-error: oklch(64.4% 0.127 21); /* #cf6b6b */ --color-error-content: oklch(15.4% 0 0); /* #0c0c0c */ /* Dark chart steps — separately validated against the dark card surface, * not an automatic flip of the light set. */ --chart-1: #6366f1; --chart-2: #0aa2c0; --chart-3: #33a05c; --chart-4: #d97706; --chart-5: #c445d6; } } /* Brand details daisyUI variables can't express. */ /* Focus: Ink border with a lime ring — never a blue outline. */ .input:focus, .input:focus-within, .select:focus, .textarea:focus { border-color: var(--color-base-content); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 50%, transparent); } /* Selection — lime carrying ink, in both themes. */ ::selection { background: var(--color-primary); color: var(--color-primary-content); } /* Payments brand — amounts always align. */ .tabular-nums, table.table td { font-variant-numeric: tabular-nums; }