/** * writing-gui's themes. * * This file REPLACES the base layer's /css/variables.css wholesale * (later frontend roots win by filename), so it carries the complete * token set — same names as go-server's copy, values retuned. * * Structure: * :root the structural tokens (type, spacing, radii, * layout) that every theme shares, plus the * Cream colours as the fallback. * [data-theme=""] one block per theme, restating EVERY colour * token a component reads. Nothing may fall * through to a component's built-in default — * those are Bootstrap-ish light values. * * The blocks are keyed on the attribute, not on :root, on purpose: * index.mjs puts `data-theme` on for the page, and on each * preview card in the theme picker, so a card re-scopes the tokens * for its own subtree and renders a true miniature of that theme. * * The colour contract each theme fills in: * --color-bg-secondary the app frame: sidebar, formatting toolbar * --color-bg-primary the editor / page — the writing surface * --popup-bg elevated panels * --color-text / -light primary and secondary text * --color-primary the accent: Save button, drop indicator * --color-text-white text ON the accent (dark for pale accents) * --color-link links: breadcrumbs, contents, outline * --color-selection text selection + the selected nav row * --color-border hairlines; --color-border-focus the accent- * tinted focus edge * The UI chrome stays sans-serif; the writing is serif via * --rich-text-font. Both are overridable per browser from the font * picker (index.mjs sets them inline on ); the families it * offers are the bundled packs, whose @font-face rules are imported * here from the generated /fonts/packs.css (scripts/fonts.mjs). */ @import url("/fonts/packs.css"); :root { /* Typography */ --font-primary: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-accent: Georgia, "Times New Roman", serif; --font-size-base: 1rem; --font-size-sm: 0.875rem; --font-size-lg: 1.2rem; --font-size-xl: 1.5rem; --line-height-base: 1.5; --font-weight-normal: 400; --font-weight-bold: 600; /* Spacing */ --spacing-xs: 0.375rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-lg: 1rem; --spacing-xl: 1.5rem; --spacing-xxl: 3rem; /* Layout */ --border-radius-sm: 0.25rem; --border-radius: 0.5rem; --border-radius-lg: 1em; /* Transitions */ --transition-fast: 0.15s ease-in-out; --transition-normal: 0.3s ease-in-out; --transition-slow: 1s ease-out; /* Component-specific */ --form-width: 380px; --min-form-width: 250px; --input-padding: var(--spacing-xs) var(--spacing-md); --input-margin: var(--spacing-xs) var(--spacing-md); --nav-height: 60px; /* nav-template — pinned lib defaults (unused on the app page, kept * for the base's auth pages, which inherit this file too) */ --nav-bg: #2f2a24; --nav-shadow: 0px 0px 5px #1f1f1f; --nav-shadow-mobile: 0px 0px 5px #333333; --nav-z: 99; --nav-padding: 1em; --nav-logo-width: 6em; --nav-social-width: 5.4em; --nav-links-margin: -4em 0 0 0; --nav-min-height: auto; /* nav-link */ --nav-link-padding: 0.5rem 1rem; --nav-link-color: #FAF9F6; --nav-link-color-active: rgb(128, 128, 128); --nav-link-decoration-active: none; /* container-template */ --container-max-sm: 720px; --container-max-md: 960px; --container-max-lg: 1140px; --container-padding: 0; /* input-template + filter-autocomplete — the shared inner inset: how * far any glyph inside a field (the search's magnifying glass, a * show-password button) sits from the field's edge. */ --input-shadow: none; --input-inset: 1rem; /* button-template */ --btn-shadow: none; /* rich-text-template — the writing itself is serif. Liberation * Serif first ON PURPOSE: it is what Chromium's default serif * resolves to on this machine (the Times-metric clone) and it is * the face the tool was liked in. Georgia/Times follow for machines * that have them instead. */ --rich-text-font: "Liberation Serif", Georgia, "Times New Roman", serif; --rich-text-line-height: 1.6; /* Not themed — legacy navy tokens some base pages read. */ --color-navy-dark: #001f3f; --color-navy-medium: #003366; --color-navy-light: #0A4882; /* Responsive breakpoints */ --breakpoint-sm: 600px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; } /* ===================================================================== * LIGHT THEMES * ===================================================================== */ /* Cream — whites and creams, wiki-style, gold accent. The original, * and the fallback when no data-theme is set. */ :root, [data-theme="cream"] { color-scheme: light; --color-primary: #8a6d3b; --color-primary-dark: #6b5222; --color-secondary: #857e72; --color-success: #4f7942; --color-danger: #a94442; --color-warning: #c9a227; --color-info: #5b7c99; --color-text: #2f2a24; --color-text-rgb: 47, 42, 36; /* input-template + filter-autocomplete: rgba(var(--color-text-rgb), a) */ --color-text-light: #6b6156; --color-text-white: #fdfcf7; --color-link: #6b5222; --color-selection: #ece4d0; --color-bg-primary: #fdfcf7; --color-bg-secondary: #f3eee1; --color-bg-dark: #2f2a24; --color-border: #e2dac7; --color-border-focus: #c9b98a; --color-scrollbar-track: #f3eee1; --color-scrollbar-thumb: #d6ccb4; --color-scrollbar-thumb-hover: #c5b99c; --color-scrollbar-thumb-active: #b3a689; --shadow-sm: 0 .125rem .25rem rgba(60, 50, 30, .06); --shadow: 0 .5rem 1rem rgba(60, 50, 30, .12); --shadow-lg: 0 1rem 3rem rgba(60, 50, 30, .15); --input-color: #2f2a24; --input-bg: #fffef9; --input-placeholder-color: #8f8577; --input-shadow-focus: 0 0 0 0.2rem rgba(138, 109, 59, 0.2); --btn-shadow-focus: 0 0 0 0.2rem rgba(138, 109, 59, 0.2); --btn-shadow-active: inset 2px 2px 3px #e2dac7; --rich-text-bg: #fffef9; --rich-text-select-bg: #fffef9; --rich-text-toolbar-bg: #f3eee1; --rich-text-toolbar-hover-bg: rgba(0, 0, 0, 0.07); --rich-text-toolbar-active-bg: rgba(0, 0, 0, 0.12); --tree-list-hover-bg: #ece6d6; --tree-list-selected-bg: #ece4d0; --tree-list-action-hover-bg: rgba(0, 0, 0, 0.06); --popup-bg: #fdfcf7; --popup-color: #2f2a24; --popup-header-bg: #f3eee1; --popup-border: #e2dac7; --popup-grip-color: #d6ccb4; --popup-close-color: #6b6156; --popup-close-hover-color: #2f2a24; --popup-backdrop: rgba(47, 42, 36, 0.35); --popup-shadow: 0 12px 40px rgba(60, 50, 30, 0.2); } /* Paper — plain white and cool greys, an ink-blue accent. The most * neutral of the set: nothing warm, nothing tinted. */ [data-theme="paper"] { color-scheme: light; --color-primary: #3e6b8f; --color-primary-dark: #2f5470; --color-secondary: #7b8288; --color-success: #4a8a5c; --color-danger: #b0463f; --color-warning: #b98a1e; --color-info: #4b7fa8; --color-text: #24272a; --color-text-rgb: 36, 39, 42; --color-text-light: #6b7075; --color-text-white: #ffffff; --color-link: #2f5470; --color-selection: #d3e2ee; --color-bg-primary: #ffffff; --color-bg-secondary: #f2f2f0; --color-bg-dark: #24272a; --color-border: #e2e3e1; --color-border-focus: #9fbbd0; --color-scrollbar-track: #f2f2f0; --color-scrollbar-thumb: #d5d6d4; --color-scrollbar-thumb-hover: #c2c4c2; --color-scrollbar-thumb-active: #adb0ae; --shadow-sm: 0 .125rem .25rem rgba(20, 24, 28, .06); --shadow: 0 .5rem 1rem rgba(20, 24, 28, .10); --shadow-lg: 0 1rem 3rem rgba(20, 24, 28, .14); --input-color: #24272a; --input-bg: #ffffff; --input-placeholder-color: #8b9095; --input-shadow-focus: 0 0 0 0.2rem rgba(62, 107, 143, 0.2); --btn-shadow-focus: 0 0 0 0.2rem rgba(62, 107, 143, 0.2); --btn-shadow-active: inset 2px 2px 3px #e2e3e1; --rich-text-bg: #ffffff; --rich-text-select-bg: #ffffff; --rich-text-toolbar-bg: #f2f2f0; --rich-text-toolbar-hover-bg: rgba(0, 0, 0, 0.06); --rich-text-toolbar-active-bg: rgba(0, 0, 0, 0.11); --tree-list-hover-bg: #e8e9e7; --tree-list-selected-bg: #d3e2ee; --tree-list-action-hover-bg: rgba(0, 0, 0, 0.06); --popup-bg: #fafaf9; --popup-color: #24272a; --popup-header-bg: #f2f2f0; --popup-border: #e2e3e1; --popup-grip-color: #d5d6d4; --popup-close-color: #6b7075; --popup-close-hover-color: #24272a; --popup-backdrop: rgba(36, 39, 42, 0.35); --popup-shadow: 0 12px 40px rgba(20, 24, 28, 0.18); } /* Mist + Sage — Graphite's daylight twin: pale green-greys with the * same sage accent, deepened a step so it holds up on white. */ [data-theme="mist"] { color-scheme: light; --color-primary: #4f8a6a; --color-primary-dark: #3e7057; --color-secondary: #7d8a83; --color-success: #4f8a6a; --color-danger: #b5524c; --color-warning: #b8912a; --color-info: #4f7d99; --color-text: #232826; --color-text-rgb: 35, 40, 38; --color-text-light: #5f6b65; --color-text-white: #f6faf7; --color-link: #3e7057; --color-selection: #cbe2d5; --color-bg-primary: #f8faf9; --color-bg-secondary: #eaeeec; --color-bg-dark: #232826; --color-border: #d8dfdb; --color-border-focus: #9cc2ad; --color-scrollbar-track: #eaeeec; --color-scrollbar-thumb: #cdd5d1; --color-scrollbar-thumb-hover: #b9c3be; --color-scrollbar-thumb-active: #a4b0aa; --shadow-sm: 0 .125rem .25rem rgba(20, 30, 25, .06); --shadow: 0 .5rem 1rem rgba(20, 30, 25, .10); --shadow-lg: 0 1rem 3rem rgba(20, 30, 25, .14); --input-color: #232826; --input-bg: #ffffff; --input-placeholder-color: #85918b; --input-shadow-focus: 0 0 0 0.2rem rgba(79, 138, 106, 0.22); --btn-shadow-focus: 0 0 0 0.2rem rgba(79, 138, 106, 0.22); --btn-shadow-active: inset 2px 2px 3px #d8dfdb; --rich-text-bg: #f8faf9; --rich-text-select-bg: #ffffff; --rich-text-toolbar-bg: #eaeeec; --rich-text-toolbar-hover-bg: rgba(0, 0, 0, 0.06); --rich-text-toolbar-active-bg: rgba(0, 0, 0, 0.11); --tree-list-hover-bg: #dfe6e2; --tree-list-selected-bg: #cbe2d5; --tree-list-action-hover-bg: rgba(0, 0, 0, 0.06); --popup-bg: #f3f5f4; --popup-color: #232826; --popup-header-bg: #eaeeec; --popup-border: #d8dfdb; --popup-grip-color: #cdd5d1; --popup-close-color: #5f6b65; --popup-close-hover-color: #232826; --popup-backdrop: rgba(35, 40, 38, 0.35); --popup-shadow: 0 12px 40px rgba(20, 30, 25, 0.18); } /* ===================================================================== * DARK THEMES * * The frame (sidebar, formatting toolbar) is the deepest surface, the * editor sits a step above it as the lit page, and popups are one step * higher again. Text is never pure white — around #E0E4E2 on #202422 * is plenty of contrast without glare. * ===================================================================== */ /* Cream Dark — the cream palette, inverted: warm near-blacks instead * of whites, parchment-coloured text, the gold kept for accents. */ [data-theme="cream-dark"] { color-scheme: dark; --color-primary: #a4834c; --color-primary-dark: #8a6d3b; --color-secondary: #9a9184; --color-success: #7fa86f; --color-danger: #d9736f; --color-warning: #e0b93a; --color-info: #86a6c4; --color-text: #e6dfd0; --color-text-rgb: 230, 223, 208; --color-text-light: #a89f8e; --color-text-white: #fdfcf7; --color-link: #d8bb80; --color-selection: #4d4130; --color-bg-primary: #1e1b17; --color-bg-secondary: #262219; --color-bg-dark: #12100d; --color-border: #3a342b; --color-border-focus: #6b5b3e; --color-scrollbar-track: #1e1b17; --color-scrollbar-thumb: #4a4238; --color-scrollbar-thumb-hover: #5a5145; --color-scrollbar-thumb-active: #6b6152; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6); --input-color: #e6dfd0; --input-bg: #17150f; --input-placeholder-color: #7f7566; --input-shadow-focus: 0 0 0 0.2rem rgba(201, 168, 106, 0.25); --btn-shadow-focus: 0 0 0 0.2rem rgba(201, 168, 106, 0.3); --btn-shadow-active: inset 2px 2px 3px #12100d; --rich-text-bg: #1e1b17; --rich-text-select-bg: #17150f; --rich-text-toolbar-bg: #262219; --rich-text-toolbar-hover-bg: rgba(255, 255, 255, 0.08); --rich-text-toolbar-active-bg: rgba(255, 255, 255, 0.14); --tree-list-hover-bg: #2e2921; --tree-list-selected-bg: #4d4130; --tree-list-action-hover-bg: rgba(255, 255, 255, 0.08); --popup-bg: #262219; --popup-color: #e6dfd0; --popup-header-bg: #1e1b17; --popup-border: #3a342b; --popup-grip-color: #4a4238; --popup-close-color: #a89f8e; --popup-close-hover-color: #e6dfd0; --popup-backdrop: rgba(0, 0, 0, 0.6); --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* Graphite + Sage — a sophisticated dark writing room that does not * read as a code editor. Green-tinted greys, sage for everything * that means "here" or "active". */ [data-theme="graphite"] { color-scheme: dark; --color-primary: #79a68d; --color-primary-dark: #679478; --color-secondary: #8f9a94; --color-success: #8fbc9c; --color-danger: #d3807a; --color-warning: #d6b45f; --color-info: #84a8bf; --color-text: #e3e7e4; --color-text-rgb: 227, 231, 228; --color-text-light: #9da8a2; --color-text-white: #141816; /* dark label on the pale sage button */ --color-link: #79a68d; --color-selection: #3c6250; --color-bg-primary: #222625; --color-bg-secondary: #181b1a; --color-bg-dark: #101312; --color-border: #363d3a; --color-border-focus: #5a8a6f; --color-scrollbar-track: #181b1a; --color-scrollbar-thumb: #363d3a; --color-scrollbar-thumb-hover: #454e4a; --color-scrollbar-thumb-active: #56615c; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6); --input-color: #e3e7e4; --input-bg: #141716; --input-placeholder-color: #76817b; --input-shadow-focus: 0 0 0 0.2rem rgba(121, 166, 141, 0.28); --btn-shadow-focus: 0 0 0 0.2rem rgba(121, 166, 141, 0.32); --btn-shadow-active: inset 2px 2px 3px #101312; --rich-text-bg: #222625; --rich-text-select-bg: #181b1a; --rich-text-toolbar-bg: #181b1a; --rich-text-toolbar-hover-bg: rgba(255, 255, 255, 0.08); --rich-text-toolbar-active-bg: rgba(121, 166, 141, 0.28); --tree-list-hover-bg: #222625; --tree-list-selected-bg: #3c6250; --tree-list-action-hover-bg: rgba(255, 255, 255, 0.08); --popup-bg: #2a2f2d; --popup-color: #e3e7e4; --popup-header-bg: #222625; --popup-border: #363d3a; --popup-grip-color: #454e4a; --popup-close-color: #9da8a2; --popup-close-hover-color: #e3e7e4; --popup-backdrop: rgba(0, 0, 0, 0.6); --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* Midnight Ink — cooler and more literary: blue-black surfaces with a * muted, dusty blue. Somewhere between a manuscript app and a good * text editor. */ [data-theme="midnight"] { color-scheme: dark; --color-primary: #6f9fc4; --color-primary-dark: #5c8cb1; --color-secondary: #8b98a4; --color-success: #82b393; --color-danger: #d47f7a; --color-warning: #d4b466; --color-info: #6f9fc4; --color-text: #dee5eb; --color-text-rgb: 222, 229, 235; --color-text-light: #8f9daa; --color-text-white: #0f161d; /* dark label on the pale blue button */ --color-link: #6f9fc4; --color-selection: #294d68; --color-bg-primary: #19222c; --color-bg-secondary: #111820; --color-bg-dark: #0b1016; --color-border: #2b3742; --color-border-focus: #4c7ea5; --color-scrollbar-track: #111820; --color-scrollbar-thumb: #2b3742; --color-scrollbar-thumb-hover: #394754; --color-scrollbar-thumb-active: #485866; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6); --input-color: #dee5eb; --input-bg: #0e141b; --input-placeholder-color: #6f7c88; --input-shadow-focus: 0 0 0 0.2rem rgba(111, 159, 196, 0.28); --btn-shadow-focus: 0 0 0 0.2rem rgba(111, 159, 196, 0.32); --btn-shadow-active: inset 2px 2px 3px #0b1016; --rich-text-bg: #19222c; --rich-text-select-bg: #111820; --rich-text-toolbar-bg: #111820; --rich-text-toolbar-hover-bg: rgba(255, 255, 255, 0.08); --rich-text-toolbar-active-bg: rgba(111, 159, 196, 0.28); --tree-list-hover-bg: #19222c; --tree-list-selected-bg: #294d68; --tree-list-action-hover-bg: rgba(255, 255, 255, 0.08); --popup-bg: #202c37; --popup-color: #dee5eb; --popup-header-bg: #19222c; --popup-border: #2b3742; --popup-grip-color: #394754; --popup-close-color: #8f9daa; --popup-close-hover-color: #dee5eb; --popup-backdrop: rgba(0, 0, 0, 0.6); --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* Charcoal + Burgundy — the one with personality: plum-tinted * charcoals and a wine accent. Bookish without any parchment. */ [data-theme="charcoal"] { color-scheme: dark; --color-primary: #a35f70; --color-primary-dark: #8e4f60; --color-secondary: #9a9093; --color-success: #8bb08f; --color-danger: #d8827b; --color-warning: #d3b06a; --color-info: #8aa4bd; --color-text: #e8e1e3; --color-text-rgb: 232, 225, 227; --color-text-white: #f8f1f3; /* the wine is deep enough for light text */ --color-text-light: #a89da1; --color-link: #c58394; /* the accent, lifted a step so it reads as a link on dark */ --color-selection: #603946; --color-bg-primary: #242123; --color-bg-secondary: #191719; --color-bg-dark: #100f10; --color-border: #3a3538; --color-border-focus: #8a5666; --color-scrollbar-track: #191719; --color-scrollbar-thumb: #3a3538; --color-scrollbar-thumb-hover: #4a4448; --color-scrollbar-thumb-active: #5b5459; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6); --input-color: #e8e1e3; --input-bg: #151315; --input-placeholder-color: #7d7377; --input-shadow-focus: 0 0 0 0.2rem rgba(163, 95, 112, 0.3); --btn-shadow-focus: 0 0 0 0.2rem rgba(163, 95, 112, 0.35); --btn-shadow-active: inset 2px 2px 3px #100f10; --rich-text-bg: #242123; --rich-text-select-bg: #191719; --rich-text-toolbar-bg: #191719; --rich-text-toolbar-hover-bg: rgba(255, 255, 255, 0.08); --rich-text-toolbar-active-bg: rgba(163, 95, 112, 0.32); --tree-list-hover-bg: #242123; --tree-list-selected-bg: #603946; --tree-list-action-hover-bg: rgba(255, 255, 255, 0.08); --popup-bg: #2d292c; --popup-color: #e8e1e3; --popup-header-bg: #242123; --popup-border: #3a3538; --popup-grip-color: #4a4448; --popup-close-color: #a89da1; --popup-close-hover-color: #e8e1e3; --popup-backdrop: rgba(0, 0, 0, 0.6); --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* Slate + Lavender — modern and a little creative: indigo-leaning * slates with a soft lavender. Suits fiction, poetry, journaling. */ [data-theme="slate"] { color-scheme: dark; --color-primary: #9a8fc4; --color-primary-dark: #857ab3; --color-secondary: #93929f; --color-success: #8cb59a; --color-danger: #d4807f; --color-warning: #d2b46b; --color-info: #86a4c6; --color-text: #e5e4eb; --color-text-rgb: 229, 228, 235; --color-text-light: #9d9baa; --color-text-white: #15161e; /* dark label on the pale lavender button */ --color-link: #9a8fc4; --color-selection: #4a4368; --color-bg-primary: #21232d; --color-bg-secondary: #171820; --color-bg-dark: #0f1015; --color-border: #363946; --color-border-focus: #6f65a0; --color-scrollbar-track: #171820; --color-scrollbar-thumb: #363946; --color-scrollbar-thumb-hover: #454857; --color-scrollbar-thumb-active: #555869; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .5); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6); --input-color: #e5e4eb; --input-bg: #13141b; --input-placeholder-color: #767584; --input-shadow-focus: 0 0 0 0.2rem rgba(154, 143, 196, 0.28); --btn-shadow-focus: 0 0 0 0.2rem rgba(154, 143, 196, 0.32); --btn-shadow-active: inset 2px 2px 3px #0f1015; --rich-text-bg: #21232d; --rich-text-select-bg: #171820; --rich-text-toolbar-bg: #171820; --rich-text-toolbar-hover-bg: rgba(255, 255, 255, 0.08); --rich-text-toolbar-active-bg: rgba(154, 143, 196, 0.28); --tree-list-hover-bg: #21232d; --tree-list-selected-bg: #4a4368; --tree-list-action-hover-bg: rgba(255, 255, 255, 0.08); --popup-bg: #292c38; --popup-color: #e5e4eb; --popup-header-bg: #21232d; --popup-border: #363946; --popup-grip-color: #454857; --popup-close-color: #9d9baa; --popup-close-hover-color: #e5e4eb; --popup-backdrop: rgba(0, 0, 0, 0.6); --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }