/* ========================================================================== keepsake-web — THEME LAYER -------------------------------------------------------------------------- This file defines the *only* place in the codebase where a colour literal is allowed. `main.css` builds every component out of the tokens below and must never contain a hex value. If you need a new colour, add a semantic token here and define it in ALL SIX blocks, or the theme will fall back to an inherited value and look broken in exactly one theme. TOKEN CONTRACT -------------- Structural tokens (spacing, radii, type, motion) are theme-independent and live in the first `:root` block. They are never redefined per theme. Palette tokens — every theme MUST define all nineteen: --ks-bg page ground, behind everything --ks-surface card / panel / table ground --ks-surface-raised menus, popovers, hovered rows — one step above surface --ks-sidebar-bg the primary nav column --ks-code-bg "Show API" blocks and inline code --ks-border hairlines, dividers, input outlines --ks-text body text; contrast-critical --ks-text-muted secondary text; still body-size, so still >= 4.5:1 --ks-accent primary action, active nav, links --ks-accent-contrast text placed ON --ks-accent --ks-success healthy / running --ks-warning degraded / throttled --ks-danger failed / destructive actions --ks-info neutral informational --ks-focus-ring keyboard focus outline colour --ks-overlay modal scrim --ks-shadow-sm/md/lg elevation, tuned per theme (dark themes need deeper, more diffuse shadows to read at all) ACCESSIBILITY ------------- Every ratio in the comments below was computed with the WCAG 2.1 relative luminance formula (sRGB linearisation, L = 0.2126R + 0.7152G + 0.0722B, ratio = (L1 + 0.05) / (L2 + 0.05)) — not estimated by eye. The four non-high-contrast themes clear AA (4.5:1) on every body-text pair; the high-contrast theme clears AAA (7:1) on every pair, and in practice clears 8.6:1 or better. Badge fills are `color-mix(in srgb, 14%, var(--ks-surface))` in main.css. That mix was measured too: the worst case across all five themes is parchment's accent pill at 4.81:1, still above AA. DEFAULTING ---------- With no `data-theme` attribute the document follows the OS via `prefers-color-scheme`, so a first visit with JavaScript disabled still looks correct. The inline script in the document head promotes a stored localStorage choice to `data-theme` before first paint, which is what prevents a flash of the wrong theme. Because the dark default is scoped to `:root:not([data-theme])`, an explicit choice always wins regardless of selector specificity. ========================================================================== */ /* -------------------------------------------------------------------------- Structural tokens — identical in every theme. -------------------------------------------------------------------------- */ :root { /* Spacing scale: a 4px base, geometric-ish. Use these, never raw px. */ --ks-space-1: 0.25rem; /* 4px */ --ks-space-2: 0.5rem; /* 8px */ --ks-space-3: 0.75rem; /* 12px */ --ks-space-4: 1rem; /* 16px */ --ks-space-5: 1.5rem; /* 24px */ --ks-space-6: 2rem; /* 32px */ --ks-space-7: 3rem; /* 48px */ --ks-radius-sm: 4px; --ks-radius-md: 6px; --ks-radius-lg: 10px; --ks-radius-pill: 999px; /* Type. The UI stack is system-native; tabular numerals matter for the resource columns, so the mono stack is used for every figure. */ --ks-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ks-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ks-text-xs: 0.6875rem; /* 11px — table meta, kbd hints */ --ks-text-sm: 0.8125rem; /* 13px — table body, nav */ --ks-text-md: 0.875rem; /* 14px — body default */ --ks-text-lg: 1rem; /* 16px — card titles */ --ks-text-xl: 1.25rem; /* 20px — page title */ --ks-leading-tight: 1.25; --ks-leading-normal: 1.55; --ks-sidebar-w: 248px; --ks-topbar-h: 52px; --ks-transition: 120ms cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } /* ========================================================================== THEME 1 — keepsake-light (also the no-preference default) The daytime default: near-white ground, one crisp white surface, a single saturated blue carrying every primary action. MEASURED (WCAG 2.1): text #12161d on bg #f4f6f9 = 16.75:1 AAA text #12161d on surface #ffffff = 18.13:1 AAA text-muted #59626f on bg #f4f6f9 = 5.70:1 AA text-muted #59626f on surface #ffffff = 6.17:1 AA accent-contrast #ffffff on accent #2c53c9 = 6.59:1 AA accent #2c53c9 on surface #ffffff = 6.59:1 AA success #116343 on surface #ffffff = 7.27:1 AAA warning #7a4d00 on surface #ffffff = 7.27:1 AAA danger #b3261e on surface #ffffff = 6.54:1 AA info #125f86 on surface #ffffff = 6.98:1 AA ========================================================================== */ :root, [data-theme="keepsake-light"] { color-scheme: light; --ks-bg: #f4f6f9; --ks-surface: #ffffff; --ks-surface-raised: #ffffff; --ks-sidebar-bg: #ffffff; --ks-code-bg: #eef1f6; --ks-border: #dfe3ea; --ks-text: #12161d; --ks-text-muted: #59626f; --ks-accent: #2c53c9; --ks-accent-contrast: #ffffff; --ks-success: #116343; --ks-warning: #7a4d00; --ks-danger: #b3261e; --ks-info: #125f86; --ks-focus-ring: #2c53c9; --ks-overlay: rgba(12, 16, 24, 0.45); --ks-shadow-sm: 0 1px 2px rgba(16, 22, 33, 0.06); --ks-shadow-md: 0 1px 3px rgba(16, 22, 33, 0.08), 0 4px 12px rgba(16, 22, 33, 0.05); --ks-shadow-lg: 0 8px 28px rgba(16, 22, 33, 0.14); } /* ========================================================================== THEME 2 — keepsake-dark The same design in low light. Surfaces step *up* in lightness with elevation (never down), and the accent is lifted to a lighter blue so it stays legible on a dark ground. MEASURED (WCAG 2.1): text #e6eaf1 on bg #0e1116 = 15.67:1 AAA text #e6eaf1 on surface #151922 = 14.58:1 AAA text #e6eaf1 on surface-raised #1c212b = 13.37:1 AAA text-muted #9aa5b5 on bg #0e1116 = 7.59:1 AAA text-muted #9aa5b5 on surface #151922 = 7.05:1 AAA accent-contrast #080f22 on accent #6f9dff = 7.21:1 AAA accent #6f9dff on surface #151922 = 6.65:1 AA success #45c98a on surface #151922 = 8.35:1 AAA warning #e3ac48 on surface #151922 = 8.59:1 AAA danger #ff7a72 on surface #151922 = 6.93:1 AA info #5cbce8 on surface #151922 = 8.22:1 AAA ========================================================================== */ @media (prefers-color-scheme: dark) { /* Scoped to :not([data-theme]) so an explicit choice always wins. */ :root:not([data-theme]) { color-scheme: dark; --ks-bg: #0e1116; --ks-surface: #151922; --ks-surface-raised: #1c212b; --ks-sidebar-bg: #12161d; --ks-code-bg: #10141b; --ks-border: #2a313d; --ks-text: #e6eaf1; --ks-text-muted: #9aa5b5; --ks-accent: #6f9dff; --ks-accent-contrast: #080f22; --ks-success: #45c98a; --ks-warning: #e3ac48; --ks-danger: #ff7a72; --ks-info: #5cbce8; --ks-focus-ring: #6f9dff; --ks-overlay: rgba(0, 0, 0, 0.6); --ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ks-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35); --ks-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55); } } [data-theme="keepsake-dark"] { color-scheme: dark; --ks-bg: #0e1116; --ks-surface: #151922; --ks-surface-raised: #1c212b; --ks-sidebar-bg: #12161d; --ks-code-bg: #10141b; --ks-border: #2a313d; --ks-text: #e6eaf1; --ks-text-muted: #9aa5b5; --ks-accent: #6f9dff; --ks-accent-contrast: #080f22; --ks-success: #45c98a; --ks-warning: #e3ac48; --ks-danger: #ff7a72; --ks-info: #5cbce8; --ks-focus-ring: #6f9dff; --ks-overlay: rgba(0, 0, 0, 0.6); --ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ks-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35); --ks-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55); } /* ========================================================================== THEME 3 — midnight Deep blue-black. Not keepsake-dark with a hue shift: the ground is darker and bluer, the borders carry more chroma so panel edges read as navy rather than grey, and the accent is a touch cooler. Intended for the wall display in a dim NOC. MEASURED (WCAG 2.1): text #dde6f7 on bg #060a16 = 15.75:1 AAA text #dde6f7 on surface #0c1324 = 14.76:1 AAA text #dde6f7 on surface-raised #121b31 = 13.64:1 AAA text-muted #93a4c4 on bg #060a16 = 7.86:1 AAA text-muted #93a4c4 on surface #0c1324 = 7.36:1 AAA accent-contrast #040a18 on accent #7ea6ff = 8.27:1 AAA accent #7ea6ff on surface #0c1324 = 7.75:1 AAA success #43cd93 on surface #0c1324 = 9.16:1 AAA warning #e6b155 on surface #0c1324 = 9.51:1 AAA danger #ff8079 on surface #0c1324 = 7.60:1 AAA info #63c3ef on surface #0c1324 = 9.33:1 AAA ========================================================================== */ [data-theme="midnight"] { color-scheme: dark; --ks-bg: #060a16; --ks-surface: #0c1324; --ks-surface-raised: #121b31; --ks-sidebar-bg: #080e1c; --ks-code-bg: #080f1e; --ks-border: #1e2a45; --ks-text: #dde6f7; --ks-text-muted: #93a4c4; --ks-accent: #7ea6ff; --ks-accent-contrast: #040a18; --ks-success: #43cd93; --ks-warning: #e6b155; --ks-danger: #ff8079; --ks-info: #63c3ef; --ks-focus-ring: #7ea6ff; --ks-overlay: rgba(2, 5, 14, 0.68); --ks-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --ks-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(2, 6, 20, 0.5); --ks-shadow-lg: 0 16px 44px rgba(2, 6, 20, 0.68); } /* ========================================================================== THEME 4 — parchment Warm sepia, deliberately low-blue for long night shifts: no channel above #fc, and the accent is a burnt sienna rather than any blue, so the whole surface emits very little short-wavelength light. Borders are warm tan, not grey — a grey hairline on this ground reads as a defect. MEASURED (WCAG 2.1): text #2a2116 on bg #efe4cf = 12.56:1 AAA text #2a2116 on surface #f7eeda = 13.71:1 AAA text #2a2116 on surface-raised #fcf6e8 = 14.68:1 AAA text-muted #63533b on bg #efe4cf = 5.89:1 AA text-muted #63533b on surface #f7eeda = 6.43:1 AA accent-contrast #fcf6e8 on accent #8a4b12 = 6.29:1 AA accent #8a4b12 on surface #f7eeda = 5.88:1 AA success #3a5f18 on surface #f7eeda = 6.43:1 AA warning #7d4f04 on surface #f7eeda = 6.08:1 AA danger #9c2415 on surface #f7eeda = 6.80:1 AA info #2a5566 on surface #f7eeda = 7.03:1 AAA ========================================================================== */ [data-theme="parchment"] { color-scheme: light; --ks-bg: #efe4cf; --ks-surface: #f7eeda; --ks-surface-raised: #fcf6e8; --ks-sidebar-bg: #f7eeda; --ks-code-bg: #eae0c8; --ks-border: #d9c9aa; --ks-text: #2a2116; --ks-text-muted: #63533b; --ks-accent: #8a4b12; --ks-accent-contrast: #fcf6e8; --ks-success: #3a5f18; --ks-warning: #7d4f04; --ks-danger: #9c2415; --ks-info: #2a5566; --ks-focus-ring: #8a4b12; --ks-overlay: rgba(42, 33, 22, 0.45); --ks-shadow-sm: 0 1px 2px rgba(74, 58, 34, 0.10); --ks-shadow-md: 0 1px 3px rgba(74, 58, 34, 0.12), 0 4px 12px rgba(74, 58, 34, 0.08); --ks-shadow-lg: 0 8px 28px rgba(74, 58, 34, 0.20); } /* ========================================================================== THEME 5 — high-contrast (WCAG AAA) Pure black ground, pure white text, and a light-grey border that is a real 1px visible edge rather than a hairline tint — this theme is for operators who need the structure of the page, not just its text, to be unambiguous. Shadows are suppressed in main.css for this theme in favour of borders, since a shadow on pure black conveys nothing. All pairs exceed the AAA threshold of 7:1; the weakest is 8.63:1. MEASURED (WCAG 2.1): text #ffffff on bg #000000 = 21.00:1 AAA text #ffffff on surface #000000 = 21.00:1 AAA text #ffffff on surface-raised #0d0d0d = 19.44:1 AAA text-muted #d6dade on bg #000000 = 14.94:1 AAA text-muted #d6dade on surface #000000 = 14.94:1 AAA accent-contrast #000000 on accent #ffd633 = 14.92:1 AAA accent #ffd633 on surface #000000 = 14.92:1 AAA success #5cf08f on surface #000000 = 14.32:1 AAA warning #ffd633 on surface #000000 = 14.92:1 AAA danger #ff9b93 on surface #000000 = 10.36:1 AAA info #7fd6ff on surface #000000 = 12.97:1 AAA weakest badge pair (danger on 14% tint #241615) = 8.63:1 AAA ========================================================================== */ [data-theme="high-contrast"] { color-scheme: dark; --ks-bg: #000000; --ks-surface: #000000; --ks-surface-raised: #0d0d0d; --ks-sidebar-bg: #000000; --ks-code-bg: #0d0d0d; --ks-border: #9aa0a6; --ks-text: #ffffff; --ks-text-muted: #d6dade; --ks-accent: #ffd633; --ks-accent-contrast: #000000; --ks-success: #5cf08f; --ks-warning: #ffd633; --ks-danger: #ff9b93; --ks-info: #7fd6ff; --ks-focus-ring: #ffd633; --ks-overlay: rgba(0, 0, 0, 0.8); /* Elevation is carried by borders, not shadow, on a pure-black ground. */ --ks-shadow-sm: none; --ks-shadow-md: none; --ks-shadow-lg: none; }